---
import ArrowLeft from "@tabler/icons/outline/arrow-left.svg";
import type { ComponentProps } from "astro/types";
import { tv } from "tailwind-variants";

import { Button } from "@/components/starwind/button";

export const carouselPrevious = tv({
  base: [
    "starwind-carousel-previous absolute size-8 rounded-full",
    // Horizontal positioning
    "group-data-[axis=x]/carousel:top-1/2 group-data-[axis=x]/carousel:-left-12 group-data-[axis=x]/carousel:-translate-y-1/2",
    // Vertical positioning
    "group-data-[axis=y]/carousel:-top-12 group-data-[axis=y]/carousel:left-1/2 group-data-[axis=y]/carousel:-translate-x-1/2 group-data-[axis=y]/carousel:rotate-90",
  ],
});

type Props = ComponentProps<typeof Button>;

const { class: className = "", variant = "outline", size = "icon", ...rest } = Astro.props;
---

<Button
  data-slot="carousel-previous"
  variant={variant}
  size={size}
  class={carouselPrevious({ class: className })}
  aria-label="Previous slide"
  {...rest}
>
  <slot name="icon">
    <ArrowLeft />
  </slot>
  <slot>
    <span class="sr-only">Previous slide</span>
  </slot>
</Button>
