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

defineProps<{
  options?: Option[]
  selectedOption: Option | null
  showChatNowButton?: boolean
  chatWithUs?: boolean
}>()

defineEmits<{
  toggleOption: [option: Option]
  startChat: []
}>()

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

<template>
  <section class="babylai:flex babylai:flex-col babylai:flex-1 babylai:gap-4">
    <div class="babylai:grid babylai:grid-cols-1 babylai:gap-4">
      <HelpscreenOption
        v-for="option in options"
        :key="option.id"
        :option="option"
        :is-selected="selectedOption?.id === option.id"
        @click="$emit('toggleOption', option)"
      />
    </div>
    <div v-if="showChatNowButton !== false" class="babylai:sticky babylai:bottom-0 babylai:z-10">
      <Button
        variant="default"
        :disabled="!selectedOption || chatWithUs === false"
        @click="$emit('startChat')"
      >
        {{ t('homeSdk.chatNow') }}
        <SolarPlain2BoldDuotone class="babylai:w-6 babylai:h-6" />
      </Button>
    </div>
  </section>
</template>
