"use client"

import { cx } from "class-variance-authority"
import { useEffect, useState } from "react"

import { useCarousel } from "./CarouselContext"

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

export function CarouselContent({
  className,
  children,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  const { carouselRef, canScrollNext, canScrollPrev } = useCarousel()
  const [isOneItem, setIsOneItem] = useState(false)

  useEffect(() => {
    setIsOneItem(!canScrollPrev() && !canScrollNext())
  }, [canScrollPrev, canScrollNext])

  return (
    <div ref={carouselRef} className={styles.viewport}>
      <div
        className={cx(styles.container, className, {
          [styles.centerContent]: isOneItem,
        })}
        {...props}
      >
        {children}
      </div>
    </div>
  )
}