<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="success-card bg-white relative-position">
      <!-- fechar -->
      <q-btn
        class="absolute-top-right close-btn q-mt-sm q-mr-sm"
        color="grey-5"
        dense
        flat
        icon="mdi-close-circle-outline"
        round
        type="button"
        @click.stop="handleClose"
      />

      <q-card-section class="text-center q-pt-lg q-pb-md">
        <!-- estrelas -->
        <div class="stars-wrapper">
          <img
            alt="estrela"
            class="star-small"
            src="star1.svg"
          />

          <img
            alt="estrela"
            class="star-big"
            src="star.svg"
          />

          <img
            alt="estrela"
            class="star-small"
            src="star2.svg"
          />
        </div>

        <!-- mascote -->
        <img
          alt="Mascote Sob Medida"
          class="success-image"
          src="diarinho-2.svg"
        />

        <!-- titulo -->
        <div class="success-title gradient-diarista q-mt-md font16 fontbold">
          {{ $t('custom_schedule.success_title_line1') }}<br>
          {{ $t('custom_schedule.success_title_line2') }}
        </div>

        <!-- subtitulo -->
        <div class="success-subtitle q-mt-md">
          {{ $t('custom_schedule.success_subtitle_before') }}

          <strong>{{ $t('custom_schedule.success_subtitle_highlight') }}</strong>

          {{ $t('custom_schedule.success_subtitle_after') }}
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { useDialogPluginComponent } from 'quasar'

defineEmits([...useDialogPluginComponent.emits])

const {
  dialogRef,
  onDialogHide
} = useDialogPluginComponent()

const handleClose = () => {
  dialogRef.value?.hide()
}
</script>

<style scoped lang="scss">
.success-card {
  width: 300px;
  border-radius: 30px;
  padding: 14px 12px 18px;
  background: white !important;
}

.close-btn {
  z-index: 2;
}

.stars-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  margin-top: 2px;
  margin-bottom: 10px;
}

.star-small {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.star-big {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.success-image {
  width: 100px;
  display: block;
  margin: 0 auto;
}

.success-title {
  line-height: 1.08;
  text-align: center;
  margin-top: 8px;
}

.success-subtitle {
  line-height: 1.35;
  color: #666;
  text-align: center;
  padding: 0 24px;
  margin-top: 14px;
}
</style>
