"use client"

import { cx } from "class-variance-authority"

import { ArrowRightIcon } from "@/components/Icons"

import { useCarousel } from "./CarouselContext"

import styles from "./carousel.module.css"

import type { CarouselButtonProps } from "./types"

export function CarouselPrevious({ className, ...props }: CarouselButtonProps) {
  const { scrollPrev, canScrollPrev } = useCarousel()

  if (!canScrollPrev()) return null

  return (
    <button
      className={cx(styles.button, styles.buttonPrev, className)}
      onClick={scrollPrev}
      aria-label="Previous slide"
      {...props}
    >
      <ArrowRightIcon color="burgundy" className={styles.prevIcon} />
    </button>
  )
}

export function CarouselNext({ className, ...props }: CarouselButtonProps) {
  const { scrollNext, canScrollNext } = useCarousel()

  if (!canScrollNext()) return null

  return (
    <button
      className={cx(styles.button, styles.buttonNext, className)}
      onClick={scrollNext}
      aria-label="Next slide"
      {...props}
    >
      <ArrowRightIcon color="burgundy" />
    </button>
  )
}