"use client";

import React from "react";

import LineTitle from "../line-title/line-title";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "../ui/carousel";
import { SeriesCardSkeleton } from "../CommonComponents/series-card-skeleton";

export const HomeCarousalSkeleton: React.FC<{ title: string }> = ({
  title,
}) => {
  return (
    <div className="container mx-auto my-12 px-4 md:px-2">
      <div className="mb-8">
        <LineTitle title={title} linkText="View All" linkHref="#" />
      </div>
      <Carousel>
        <CarouselContent>
          {Array.from({ length: 6 })?.map((_, index) => (
            <CarouselItem
              key={index}
              className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6"
            >
              <SeriesCardSkeleton />
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious className="cursor-pointer left-2 xl:-left-2 xxl:-left-12" />
        <CarouselNext className="cursor-pointer right-2 xl:-right-2 xxl:-right-12" />
      </Carousel>
    </div>
  );
};