<script setup lang="ts">
import { cn } from '@/lib/utils'
import type { Option } from '@/lib/types'

const props = defineProps<{
  option: Option
  isSelected: boolean
}>()

const emit = defineEmits<{ click: [] }>()

const chatWithUs = props.option.chatWithUs ?? true

function handleKeyDown(e: KeyboardEvent) {
  if (chatWithUs && (e.key === 'Enter' || e.key === ' ')) {
    e.preventDefault()
    emit('click')
  }
}
</script>

<template>
  <div
    :role="chatWithUs ? 'button' : undefined"
    :tabindex="chatWithUs ? 0 : undefined"
    :class="cn(
      'babylai:flex babylai:flex-col babylai:gap-2 babylai:p-6 babylai:rounded-3xl babylai:text-start babylai:border babylai:border-black-white-200 babylai:bg-card',
      'babylai:transition-all babylai:duration-200 babylai:ease-out',
      chatWithUs
        ? 'babylai:cursor-pointer babylai:active:scale-[0.98] babylai:active:opacity-95'
        : 'babylai:cursor-default',
      isSelected && 'babylai:ring babylai:ring-primary-500 babylai:shadow-md'
    )"
    @click="chatWithUs ? $emit('click') : undefined"
    @keydown="handleKeyDown"
  >
    <h2 class="babylai:text-base! babylai:font-semibold! babylai:text-card-foreground" dir="auto">{{ option.title }}</h2>
    <p
      v-for="(paragraph, idx) in option.paragraphs"
      :key="idx"
      class="babylai:text-sm babylai:text-muted-foreground babylai:leading-snug"
      dir="auto"
    >{{ paragraph }}</p>
  </div>
</template>
