"use client";

import RemindCard from "@/components/CommonComponents/remind-card";
import { useGetMyReminderList } from "@/state/profile/profile.action";
import { ListX } from "lucide-react";
import EmptyState from "../../CommonComponents/empty";
import MyListItemSkeleton from "./mylist-item-skeletin";

const RemindTab = () => {
  const { data: myList, isLoading } = useGetMyReminderList();

  console.log("myListmyList", myList);

  if (isLoading) {
    return (
      <div className="bg-[#1A1A1A] p-5 rounded-xl mt-3">
        {Array.from({ length: 3 })?.map((_, index) => (
          <MyListItemSkeleton key={index} />
        ))}
      </div>
    );
  }

  if (!myList?.items || myList.items.length === 0) {
    return (
      <div className="mt-3">
        <EmptyState
          title="Your List is Empty"
          description="You haven't added any series or movies to your list yet. "
          icon={<ListX className="w-24 h-24" />}
        />
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6">
      {/* {myList.items?.map(
        (
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
          item: any
        ) => (
          <RemindCard item={item} key={item?.id} />
        )
      )} */}

      {// eslint-disable-next-line @typescript-eslint/no-explicit-any
      myList.items?.map((item: any, index: number) => (
        <RemindCard item={item} key={item?.id ?? index} />
      ))}
    </div>
  );
};

export default RemindTab;