<template>
  <Section variant="plain" paddingY="md">
    <Stack gap="4">
      <Heading :level="2">{{ assistant?.name || t('aiAssistants.view.fallbackName') }}</Heading>

      <div class="w-full min-h-[80vh] bg-base-200 rounded-box overflow-hidden shadow">
        <iframe
          v-if="assistant"
          :src="`https://udify.app/chatbot/${assistant.id}`"
          class="w-full h-full min-h-[80vh] border-0"
          allow="microphone"
        />
        <div v-else class="w-full h-full min-h-[80vh] flex items-center justify-center text-base-content/60">
          {{ t('aiAssistants.view.not_found') }}
        </div>
      </div>
    </Stack>
  </Section>
</template>

<script setup lang="ts">
const { t } = useI18n()
const route = useRoute()

type Assistant = {
  id: string
  name: string
  description: string
}

const assistants = computed<Assistant[]>(() => ([
  {
    id: 'JqpCab7kJEburZDF',
    name: t('aiAssistants.assistants.optovia.name'),
    description: t('aiAssistants.assistants.optovia.description')
  }
]))

const assistant = computed(() =>
  assistants.value.find((a) => a.id === route.params.id)
)
</script>
