"use client";
import Image from "next/image";

interface PodcastCardProps {
  name: string;
  episodes: string;
  isNew: boolean;
  image: string;
  hue: number;
}

export function PodcastCard({ name, episodes, isNew, image, hue }: PodcastCardProps) {
  return (
    <div
      className="shrink-0 cursor-pointer group"
      style={{ width: "130px" }}
    >
      <div
        className="relative rounded-xl overflow-hidden transition-all duration-200 group-hover:-translate-y-0.5 group-hover:shadow-2xl"
        style={{ width: "130px", height: "130px" }}
      >
        <Image
          src={image}
          alt={name}
          fill
          className="object-cover transition-transform duration-[280ms] ease-out group-hover:scale-[1.04]"
          sizes="130px"
          unoptimized
        />
        <div
          className="absolute inset-0 pointer-events-none"
          style={{
            background: `radial-gradient(circle at 30% 30%, hsla(${hue},60%,55%,0.3), transparent 60%)`,
          }}
        />
        {isNew && (
          <span
            className="absolute top-2 left-2 text-[#ffffff] text-[8px] font-bold uppercase px-1.5 py-0.5 rounded-sm tracking-widest"
            style={{ background: "var(--accent)" }}
          >
            NEW
          </span>
        )}
      </div>
      <p className="mt-2 text-[10px] font-medium truncate" style={{ color: "var(--text-primary)" }}>{name}</p>
      <p className="text-[10px] mt-0.5 truncate" style={{ color: "#666" }}>{episodes}</p>
    </div>
  );
}