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

const carouselItem = tv({
  base: [
    "min-w-0 shrink-0 grow-0 basis-full",
    "group-data-[axis=x]/carousel:pl-4",
    "group-data-[axis=y]/carousel:pt-4",
  ],
});

type Props = HTMLAttributes<"div">;

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

<div
  role="group"
  aria-roledescription="slide"
  data-slot="carousel-item"
  class={carouselItem({ class: className })}
  {...rest}
>
  <slot />
</div>
