import cx from "classnames";
import type { HTMLAttributes, ReactNode } from "react";
import React from "react";

import { CLASS_SLIDE } from "./constants";

const CLASS_ROOT = CLASS_SLIDE;

interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
  className?: string;
  children?: ReactNode;
}

const CarouselItem: React.FC<CarouselItemProps> = ({
  className,
  children,
  ...other
}) => {
  const classes = cx(CLASS_ROOT, className);

  return (
    <div className={classes} {...other}>
      {children}
    </div>
  );
};

CarouselItem.displayName = "CarouselItem";

export { CarouselItem };