<script setup lang="ts">
import { useLocalTranslation } from '@/lib/composables/useLocalTranslation'
import Button from '@/components/shared/Button.vue'
import SolarPlain2BoldDuotone from '~icons/solar/plain-2-bold-duotone'

defineEmits<{
  confirm: []
  cancel: []
}>()

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

<template>
  <section class="babylai:flex babylai:justify-between babylai:gap-3 babylai:px-4 babylai:py-6 babylai:absolute babylai:left-0 babylai:right-0 babylai:bottom-11 babylai:z-20 babylai:bg-linear-to-t babylai:from-card babylai:to-transparent babylai:from-[28.32%] babylai:to-[112.59%]">
    <Button variant="secondary" @click="$emit('confirm')">{{ t('homeSdk.ConfirmationModal.confirmation_button') }}</Button>
    <Button variant="default" @click="$emit('cancel')">
      {{ t('homeSdk.ConfirmationModal.cancel_button') }}
      <SolarPlain2BoldDuotone class="babylai:w-6 babylai:h-6" />
    </Button>
  </section>
</template>
