"use client";
import Image from "next/image";
import { Play } from "lucide-react";
import IconButton from "../icon-button/icon-button";

interface CategoryItem {
  id: number;
  title: string;
  duration: string;
  viewCount: number;
  rating: number;
  series_id?: string;
  video_id?: string;
  description: string;
  src: string;
}

const CategoriesList = ({
  categoriesData,
}: {
  categoriesData: CategoryItem[];
}) => {
  console.log("categoriesData",categoriesData)
  const getImageUrl = (src: string) => {
    if (src === 'undefined') return "/not-found.jpg";
    if (src === undefined) return "/not-found.jpg";
    return src || "/not-found.jpg";
  };
  console.log("getImageUrl",getImageUrl)
  
  return (
    <div className="space-y-6">
      {categoriesData?.length > 0 ? (
        categoriesData?.map((category) => (
          <div key={category?.id || ""}>
            <div className="grid grid-cols-1 md:grid-cols-12 gap-6 mb-4">
              <div className="md:col-span-2 ">
                <Image
                 src={getImageUrl(category?.src)}
                  alt={category?.title??''}
                  width={204}
                  height={250}
                  className="rounded-[5px] aspect-[3/4]"
                />
              </div>

              <div className="md:col-span-10">
                <h3 className="text-[20px] text-white">{category?.title??''}</h3>
                <div className="flex gap-2 my-0">
                  {/* <p className="flex gap-2 text-[#D1D0CF]">
                  <Clock /> {category.duration}
                </p> */}
                  {/* <p className="flex gap-2 text-[#D1D0CF]">
                    <Play /> {category.viewCount}
                  </p>
                  <div className="flex items-center space-x-1 mr-6">
                    <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                    <span className="font-semibold">{category.rating}</span>
                  </div> */}
                </div>
                <p className="text-[16px] text-[#D1D0CF] font-light my-2">
                  {category?.description??''}
                </p>
                <div className="mt-3 flex gap-5">
                  <IconButton
                    label="Watch Now"
                    icon={<Play className="w-5 h-5" />}
                    href={
                      category?.series_id
                        ? `/series/${category?.series_id}`
                        : `/video/${category?.video_id}`
                    }
                    size="lg"
                    className="!p-3 px-6 w-fit"
                  />
                  {/* <Button className="border border-[#C0C0C0] bg-[#3D3D3D] text-[14px] text-white cursor-pointer p-6 flex items-center justify-center gap-2">
                    Add to List
                    <Plus />
                  </Button> */}
                </div>
              </div>
            </div>
            <hr className="opacity-15" />
          </div>
        ))
      ) : (
        <div className="text-white flex justify-center items-center h-full min-h-[200px]">
          No series found in this category.
        </div>
      )}
    </div>
  );
};

export default CategoriesList;