"use client"

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

import { useCarousel } from "./CarouselContext"

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

export function CarouselContent({
  className,
  children,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  const { carouselRef } = useCarousel()

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