<script setup lang="ts">
import { AccordionTrigger as ShadcnAccordionTrigger } from '@/components/core/accordion';
import type { UiAccordionTriggerProps } from './types';

defineOptions({
  name: 'UiAccordionTrigger',
});

const props = defineProps<UiAccordionTriggerProps>();

// shadcn styles rotate only SVG chevrons (`[data-state=open]>svg`).
// Our icons render as `<span data-slot="icon" ... />`, so we mirror that behavior.
const uiIconRotationClasses =
  '[&[data-state=open]>[data-slot=icon]]:rotate-180';
</script>

<template>
  <ShadcnAccordionTrigger
    :as-child="props.asChild"
    :class="uiIconRotationClasses"
  >
    <slot />
    <template #icon>
      <slot name="icon" />
    </template>
  </ShadcnAccordionTrigger>
</template>
