/**
 * SerieCardHome — Card de série/programa para a Home
 * Estilo: imagem de fundo com gradiente e texto sobreposto.
 */

import { assetUrl } from "@/lib/asset";
import { Link } from "wouter";
import type { PodcastPrograma } from "@shared/types";

interface SerieCardHomeProps {
  programa: PodcastPrograma;
}

export default function SerieCardHome({ programa }: SerieCardHomeProps) {
  return (
    <Link href={`/serie/${programa.id}?autoplay=true`}>
      <div
        className="flex-shrink-0 w-44 lg:w-56 group cursor-pointer"
        style={{ scrollSnapAlign: "start" }}
      >
        <div className="relative aspect-square rounded-xl overflow-hidden shadow-lg bg-sof-borgonha-light">
          {/* Fallback de fundo quando imagem não carrega */}
          <div className="absolute inset-0 flex items-center justify-center">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1} className="w-12 h-12 text-white/10">
              <path strokeLinecap="round" strokeLinejoin="round" d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75M8.25 21h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z" />
            </svg>
          </div>
          <img
            src={assetUrl(programa.capa) ?? ""}
            alt={programa.titulo}
            className="relative w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
          <div className="absolute bottom-0 left-0 right-0 p-3 translate-y-2 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
            <span className="text-[10px] uppercase tracking-widest text-sof-gold font-bold">
              {programa.categoria ?? "Podcast"}
            </span>
          </div>
        </div>
        <p className="text-sm font-semibold truncate mt-2 leading-tight transition-colors group-hover:text-sof-gold text-sof-text">
          {programa.titulo}
        </p>
        <p className="text-xs text-sof-text-3 truncate">
          {programa.genero ?? "Série"}
        </p>
      </div>
    </Link>
  );
}
