<template>
  <div class="terms-accept">
    <q-checkbox
      :model-value="modelValue"
      dense
      color="violet-normal"
      @update:model-value="$emit('update:modelValue', $event)"
    >
      <span class="terms-text">
        {{ $t("auth.terms.accept_prefix") }}
        <a
          class="terms-link"
          href="#"
          @click.stop.prevent="openUrl(PRIVACY_POLICY_URL)"
        >
          {{ $t("auth.terms.link") }}
        </a>
      </span>
    </q-checkbox>

    <div v-if="error" class="terms-error text-negative">
      {{ $t("auth.terms.required") }}
    </div>
  </div>
</template>

<script setup>
import { PRIVACY_POLICY_URL, openUrl } from "src/helpers/links";

defineProps({
  modelValue: { type: Boolean, default: false },
  error: { type: Boolean, default: false },
});

defineEmits(["update:modelValue"]);
</script>

<style lang="scss" scoped>
@use "sass:map";
@use "src/css/quasar.variables.scss" as *;

.terms-text {
  color: map.get($colors, "text-2");
  font-size: 13px;
}

.terms-link {
  color: map.get($colors, "violet-normal");
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;

  &:hover {
    color: map.get($colors, "violet-normal-hover");
  }
}

.terms-error {
  font-size: 12px;
  margin-left: 32px;
}
</style>
