"use client";

import { Play, Star } from "lucide-react";
import IconButton from "../icon-button/icon-button";
import { Episode } from "../video-player/video-detail-type";

export default function EpisodesSlider({
  seriesDetails,
}: {
  seriesDetails: Episode[];
}) {
  console.log(seriesDetails, "seriesDetails");
  return (
    <div className="relative min-h-screen bg-black text-white overflow-hidden">
      <div
        className="absolute inset-0 bg-cover bg-center transition-all duration-1000 ease-in-out"
        style={{
          backgroundImage: `url(${seriesDetails[0]?.series?.thumbnail_high_16x9 ?? seriesDetails[0]?.series?.thumbnail_high_9x16 ?? seriesDetails[0]?.series?.thumbnail})`,
        }}
      >
        <div className="absolute inset-0 bg-gradient-to-r from-black/90 via-black/50 to-black/30" />
      </div>
      <div className="relative z-10 flex flex-col min-h-screen">
        <div className="container mx-auto flex-1 table md:flex">
          <div className="flex-1 flex items-center">
            <div
              className={`max-w-2xl space-y-6 mt-[128px] md:mt-0 transition-all duration-300 ease-in-out transform px-4 md:px-2`}
            >
              {/* <p className="text-white text-[16px] font-light">
                Home / Action Drama / Dark Nexus
              </p> */}
              <h1 className="text-[40px] md:text-[70px] font-bold leading-tight text-[#D4D4D4]">
                {seriesDetails[0]?.series?.title}
              </h1>

              <div className="flex items-center text-sm">
                {/* <span className="px-2 py-1 bg-[#672BFE] rounded-[7px] text-[14px] font-semibold mr-2">
                  {currentShow.genre}
                </span> */}
                <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">
                    {seriesDetails[0]?.series?.averageRating}
                  </span>
                </div>
                {/* <Timer className="mr-2" />
                <span className="text-gray-300">{currentShow.time}</span> */}
              </div>

              <p className="text-[16px] text-white font-normal leading-relaxed max-w-xl">
                {seriesDetails[0]?.series?.description}
              </p>
              {/* 
              <div className="flex gap-1 mb-1">
                <p className="bg-[linear-gradient(89deg,#ED3A57_34.19%,#FD521E_99.12%)] bg-clip-text text-transparent font-bold text-[14px]">
                  Tag:
                </p>
              </div> */}

              <div className="flex gap-1 mb-1">
                <p className="bg-[linear-gradient(89deg,#ED3A57_34.19%,#FD521E_99.12%)] bg-clip-text text-transparent font-bold text-[14px]">
                  Tags:
                </p>
                <p className="text-[14px] text-white">
                  {seriesDetails[0]?.series?.tags?.join(", ")}
                </p>
              </div>

              <div className="flex gap-1 mb-8">
                <p className="bg-[linear-gradient(89deg,#ED3A57_34.19%,#FD521E_99.12%)] bg-clip-text text-transparent font-bold text-[14px]">
                  Starring:
                </p>
                <p className="text-[14px] text-white">
                  {seriesDetails[0]?.series?.cast_members?.join(", ")}
                </p>
              </div>

              <div className="flex space-x-4 mb-2">
                <IconButton
                  label="Watch Now"
                  icon={<Play className="w-5 h-5" />}
                  href={`/series/${seriesDetails[0]?.series?.series_id}`}
                  size="lg"
                  className="!p-3 px-6 w-fit"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}