<script setup lang="ts">
import { useLocalTranslation } from '@/lib/composables/useLocalTranslation'
import Button from '@/components/shared/Button.vue'
import PoweredBy from '@/ui/PoweredBy.vue'
import SolarChatRoundUnreadBoldDuotone from '~icons/solar/chat-round-unread-bold-duotone'
import SolarCloseCircleLineDuotone from '~icons/solar/close-circle-line-duotone'
import SolarPlain2BoldDuotone from '~icons/solar/plain-2-bold-duotone'

defineProps<{
  title: string
  message: string
  onCancel: () => void
  onConfirm: () => void
}>()

const { t } = useLocalTranslation()
</script>

<template>
  <div class="babylai:absolute babylai:inset-0 babylai:z-50 babylai:flex babylai:items-end babylai:rounded-3xl babylai:overflow-hidden">
    <div class="babylai:absolute babylai:inset-0 babylai:bg-black/60" @click="onCancel" />
    <div class="babylai:flex babylai:flex-col babylai:bg-card babylai:rounded-2xl babylai:w-full babylai:z-50 babylai:shadow-lg">
      <div class="babylai:flex babylai:flex-col babylai:p-6 babylai:pb-5 babylai:w-full">
        <button class="babylai:border-0 babylai:p-0 babylai:flex babylai:bg-transparent babylai:cursor-pointer babylai:mb-6 babylai:ms-auto babylai:text-card-foreground" type="button" @click="onCancel">
          <SolarCloseCircleLineDuotone class="babylai:w-7 babylai:h-7" />
        </button>
        <section class="babylai:flex babylai:items-center babylai:justify-center babylai:border-b babylai:border-black-white-200 babylai:pb-6 babylai:mb-6">
          <div class="babylai:flex babylai:items-center babylai:justify-center babylai:w-20 babylai:h-20 babylai:rounded-full babylai:p-3 babylai:bg-primary/15 babylai:text-primary">
            <SolarChatRoundUnreadBoldDuotone class="babylai:w-16 babylai:h-16" />
          </div>
        </section>
        <h3 class="babylai:text-2xl! babylai:text-center babylai:font-bold! babylai:mb-2! babylai:text-card-foreground">{{ title }}</h3>
        <p class="babylai:text-sm babylai:text-center babylai:text-muted-foreground">{{ message }}</p>
        <div class="babylai:flex babylai:justify-between babylai:gap-3 babylai:mt-6">
          <Button variant="secondary" @click="onCancel">
            {{ t('homeSdk.ConfirmationModal.cancel_button') }}
            <SolarPlain2BoldDuotone class="babylai:w-6 babylai:h-6" />
          </Button>
          <Button variant="default" @click="onConfirm">{{ t('homeSdk.ConfirmationModal.confirmation_button') }}</Button>
        </div>
      </div>
      <PoweredBy />
    </div>
  </div>
</template>
