---
/**
 * NOTE: style="animation: none;" makes it so the close animation doesn't run on page load
 * It is later removed in the Accordion.astro script
 */
import type { HTMLAttributes } from "astro/types";
import { tv } from "tailwind-variants";

type Props = HTMLAttributes<"div">;

export const accordionContent = tv({
  base: [
    "starwind-accordion-content",
    "transform-gpu overflow-hidden",
    "data-[state=closed]:animate-accordion-up data-[state=closed]:h-0",
    "data-[state=open]:animate-accordion-down",
  ],
});

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

<div
  class={accordionContent({ class: className })}
  data-state="closed"
  style="animation: none;"
  data-slot="accordion-content"
  {...rest}
>
  <div class="pt-0 pb-4">
    <slot />
  </div>
</div>
