/**
 * ApresentadorCardHome — Card circular de apresentador para a Home
 */

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

interface ApresentadorCardHomeProps {
  apresentador: PodcastApresentador;
}

export default function ApresentadorCardHome({ apresentador }: ApresentadorCardHomeProps) {
  return (
    <Link href={`/apresentador/${apresentador.id}`}>
      <div
        className="flex-shrink-0 w-32 lg:w-40 text-center group cursor-pointer"
        style={{ scrollSnapAlign: "start" }}
      >
        <div className="relative w-24 h-24 lg:w-32 lg:h-32 mx-auto mb-3 overflow-hidden rounded-full border-2 border-white/10 group-hover:border-sof-gold transition-all duration-300 shadow-lg bg-sof-borgonha-light">
          <img
            src={assetUrl(apresentador.foto) ?? assetUrl("/placeholder-user.svg")}
            alt={apresentador.nome}
            className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500"
          />
        </div>
        <p className="text-xs lg:text-sm font-bold text-sof-text group-hover:text-sof-gold transition-colors truncate px-1">
          {apresentador.nome}
        </p>
      </div>
    </Link>
  );
}
