import Autoplay from 'embla-carousel-autoplay';

import { cn } from '@/shared/lib/utils';
import {
  Carousel,
  CarouselContent,
  CarouselNext,
  CarouselPrevious,
} from '@/shared/shadcn-ui/carousel';

interface SliderEntityProps {
  children: React.ReactNode;
  autoplayDelay: number;
  buttonsClassName?: string;
  showButtons?: boolean;
}

export const SliderEntity = ({
  children,
  autoplayDelay,
  buttonsClassName,
  showButtons = true,
}: SliderEntityProps) => {
  const buttonsContainerClassName = cn(
    'pointer-events-none absolute inset-0 hidden items-center justify-between sm:flex',
    buttonsClassName,
  );

  return (
    <Carousel
      className='max-h-full w-full'
      opts={{ loop: true, align: 'start', slidesToScroll: 1 }}
      plugins={[
        Autoplay({
          delay: autoplayDelay,
          stopOnInteraction: true,
          stopOnMouseEnter: true,
          stopOnFocusIn: true,
        }),
      ]}
    >
      <CarouselContent className='-ml-4 h-full'>{children}</CarouselContent>
      {showButtons && (
        <div className={buttonsContainerClassName}>
          <CarouselPrevious className='pointer-events-auto z-10 flex h-12 w-6 cursor-pointer items-center justify-center rounded-l-none rounded-r-full border-none bg-white/70 pr-1 hover:bg-white/90' />
          <CarouselNext className='pointer-events-auto z-10 flex h-12 w-6 cursor-pointer items-center justify-center rounded-l-full rounded-r-none border-none bg-white/70 pl-1 hover:bg-white/90' />
        </div>
      )}
    </Carousel>
  );
};
