import useInView from "@/hooks/use-in-view";
import CarouselContent from "./CarouselContent";
import { CarouselPropsWithNavigation } from "@/types/front";

type Props = CarouselPropsWithNavigation & {
  className?: string;
};
export default function Carousel(props: Props) {
  const { className, ...carouselProps } = props;
  const { ref, isVisible } = useInView();

  return (
    <div ref={ref} className={className}>
      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
      {isVisible && <CarouselContent {...carouselProps} />}
    </div>
  );
}