---
import type { HTMLAttributes } from "astro/types";
import { tv } from "tailwind-variants";

type Props = HTMLAttributes<"div"> & {
  /**
   * The value of the item
   */
  value: string;
};

export const accordionItem = tv({
  base: "starwind-accordion-item border-b last:border-b-0",
});

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

<div
  class={accordionItem({ class: className })}
  data-value={value}
  data-state="closed"
  data-slot="accordion-item"
  {...rest}
>
  <slot />
</div>
