<script setup lang="ts">
import { cn } from '@/lib/utils'
import { useLocalTranslation } from '@/lib/composables/useLocalTranslation'
import ActionButton from './ActionButton.vue'
import SolarAltArrowLeftLinear from '~icons/solar/alt-arrow-left-linear'
import IcRoundMinus from '~icons/ic/round-minus'
import MaterialSymbolsCloseSmallOutlineRounded from '~icons/material-symbols/close-small-outline-rounded'

defineProps<{
  optionTitle: string
  handleBack: () => void
  handleEndChat: () => void
  handleMinimize: () => void
}>()

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

<template>
  <header class="bg-header babylai:flex babylai:items-center babylai:justify-between babylai:p-6 babylai:border-b babylai:border-black-white-200">
    <div class="babylai:flex babylai:items-center babylai:gap-2">
      <ActionButton :on-click="handleBack" :class="cn(i18n.language === 'ar' && 'babylai:rotate-180')" aria-label="Back">
        <SolarAltArrowLeftLinear />
      </ActionButton>
      <ActionButton :on-click="handleEndChat" aria-label="End Chat">
        <MaterialSymbolsCloseSmallOutlineRounded />
      </ActionButton>
    </div>

    <h2 class="babylai:text-lg! babylai:font-semibold! babylai:text-card-foreground">{{ optionTitle }}</h2>

    <ActionButton :on-click="handleMinimize" aria-label="Minimize">
      <IcRoundMinus />
    </ActionButton>
  </header>
</template>
