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

const carouselContent = tv({
  base: "overflow-hidden",
});

const carouselContainer = tv({
  base: [
    "flex group-data-[axis=y]/carousel:flex-col",
    "group-data-[axis=x]/carousel:-ml-4",
    "group-data-[axis=y]/carousel:-mt-4",
  ],
});

type Props = HTMLAttributes<"div">;

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

<div class={carouselContent()} data-slot="carousel-content" {...rest}>
  <div class={carouselContainer({ class: className })} data-slot="carousel-container">
    <slot />
  </div>
</div>
