---
import ChevronDown from "@tabler/icons/outline/chevron-down.svg";
import type { HTMLAttributes } from "astro/types";
import { tv } from "tailwind-variants";

type Props = HTMLAttributes<"button">;

export const accordionTrigger = tv({
  base: [
    "starwind-accordion-trigger",
    "flex w-full items-center justify-between gap-4 rounded-md py-4",
    "hover:text-muted-foreground text-left font-medium transition-all",
    "[&[data-state=open]>svg]:rotate-180",
    "focus-visible:border-outline focus-visible:ring-outline/50 outline-none focus-visible:ring-3",
  ],
});

const { class: className, ...rest } = Astro.props;
---

<button
  type="button"
  class={accordionTrigger({ class: className })}
  data-slot="accordion-trigger"
  aria-expanded="false"
  {...rest}
>
  <slot />
  <slot name="icon">
    <ChevronDown class="size-5 shrink-0 transition-transform duration-200" />
  </slot>
</button>
