"use client";

import React from "react";
import { SeriesItem } from "../CommonComponents/series-card";
import LineTitle from "../line-title/line-title";
import PosterCard from "../poster-card/poster-card";

export interface HomeCarousalProps {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  data: any[];
  title: string;
  categoryKey: string;
  refetch?: () => void;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  recommendData?: any[];
  indexSet?: number;
  description?: string;
}

const HomeCarousal: React.FC<HomeCarousalProps> = ({
  data,
  title,
  categoryKey,
  recommendData,
  indexSet,
  description,
  refetch,
}) => {
  const carouselItems: SeriesItem[] = data?.map((item) => ({
    id: item?.series_id ?? item?.video_id,
    series_id: item?.series_id,
    is_reminded: item?.is_reminded,
    video_id: item?.video_id,
    src: `${item?.thumbnail_high_3x4 ?? item?.series_thumbnail ?? item?.thumbnail}`,
    title: item?.title,
    genres:
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      item?.seriesCategories?.map((cat: any) => cat?.category?.name) ?? [],
    content_tag: item?.content_tag,
    tags: item?.tags,
    blurHash: item?.thumbnail_blurhash_9x16,
    early_access_datetime: item?.early_access_datetime,
    schedule_datetime: item?.schedule_datetime,
    description: item?.description,
  }));
  {
  }

  return (
    <div className="container mx-auto my-12 px-4 md:px-2">
      <div className="mb-8">
        <div>
          <LineTitle
            title={title}
            linkText="View All "
            linkHref={`/categories/${categoryKey}`}
          />
        </div>
      </div>
      <PosterCard
        items={carouselItems}
        recommendData={recommendData}
        description={description}
        id={categoryKey}
        categoryKey={categoryKey}
        refetch={refetch}
        indexSet={indexSet}
      />
    </div>
  );
};

export default HomeCarousal;