import Image from "next/image";
import React from "react";
import IconButton from "../icon-button/icon-button";
import { Play } from "lucide-react";
import { ImageConstant } from "../../../constant/ImageConstant";

const HistorySeriesCard = ({
  item,
}: {
  item: {
    thumbnail_high_9x16: string;
    thumbnailUrl: string;
    id: string;
    seriesInfo: { title: string; id: string };
    episode_number: string;
    episode_no?: string;
    video_id?: string;
    episode_id: string;
  };
}) => {
  return (
    <div key={item.id} className="flex items-center gap-5 mb-5 mt-5">
      <div className="relative w-32 h-48 flex-shrink-0">
        <Image
          src={
            item?.thumbnail_high_9x16?.startsWith("http")
              ? item.thumbnail_high_9x16
              : item?.thumbnail_high_9x16
                ? `${process.env.NEXT_PUBLIC_IMAGE_BASE_URL}/${item.thumbnail_high_9x16}`
                : item?.thumbnailUrl?.startsWith("http")
                  ? item.thumbnailUrl
                  : item?.thumbnailUrl
                    ? `${process.env.NEXT_PUBLIC_IMAGE_BASE_URL}/${item.thumbnailUrl}`
                    : ImageConstant.imagePlaceHolder
          }
          alt={item?.seriesInfo?.title || "Series thumbnail"}
          width={200}
          height={200}
          className="rounded-lg object-cover h-48"
        />
      </div>

      <div>
        <h5 className="text-xl font-bold text-white my-2">
          {item?.seriesInfo?.title}
        </h5>
        {item?.episode_id && (
          <h5 className="bg-[#3D3D3D] w-fit p-2 px-4 rounded-sm border border-[#262525] mb-4 text-sm">
            {`Ep. ${item?.episode_no ?? item?.episode_number}`}
          </h5>
        )}
        <IconButton
          label="Watch Now"
          icon={<Play className="w-5 h-5" />}
          href={
            item?.episode_id
              ? `/series/${item.seriesInfo?.id}?episode=${item?.episode_id}`
              : `/video/${item?.video_id}`
          }
          size="lg"
          className="!p-3 px-6 font-bold !py-2 w-fit"
        />
      </div>
    </div>
  );
};

export default HistorySeriesCard;