<template>
  <Section variant="plain" paddingY="md">
    <Stack gap="6">
      <PageHeader :title="t('aiAssistants.header.title')" />

      <Grid :cols="1" :md="2" :lg="3" :gap="4">
        <NuxtLink
          v-for="assistant in assistants"
          :key="assistant.id"
          :to="localePath(`/clientarea/ai/${assistant.id}`)"
        >
          <Card padding="lg" interactive class="h-full">
            <Stack gap="3">
              <Stack direction="row" gap="3" align="center">
                <IconCircle tone="primary" size="lg">
                  ⚖️
                </IconCircle>
                <Heading :level="3" weight="semibold">{{ assistant.name }}</Heading>
              </Stack>
              <Text tone="muted">{{ assistant.description }}</Text>
            </Stack>
          </Card>
        </NuxtLink>
      </Grid>
    </Stack>
  </Section>
</template>

<script setup lang="ts">
const localePath = useLocalePath()
const { t } = useI18n()

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')
  }
]))
</script>
