import Image from "next/image";
import Link from "next/link";
import type { Person } from "@/content/people";
import { cn } from "@/lib/utils";

type Props = {
  speaker: Person;
  className?: string;
};

export function SpeakerCard({ speaker, className }: Props) {
  return (
    <Link
      href="/speakers"
      className={cn(
        "group block overflow-hidden rounded-2xl border border-border bg-white p-4 transition-all hover:border-[#1a5c38]/25 hover:shadow-md",
        className
      )}
    >
      <div className="relative mx-auto aspect-[4/5] w-full max-h-[220px] overflow-hidden rounded-xl bg-muted/30">
        <Image
          src={speaker.image}
          alt={speaker.name}
          fill
          className="object-contain object-bottom transition-transform duration-300 group-hover:scale-[1.02]"
          sizes="(max-width: 768px) 50vw, 25vw"
        />
      </div>
      <h3 className="mt-4 text-lg font-bold leading-tight group-hover:text-[#1a5c38]">
        {speaker.name}
      </h3>
      <p className="mt-1 text-sm text-muted-foreground">{speaker.title}</p>
      <p className="mt-0.5 text-sm font-medium text-[#1a5c38]/90">{speaker.company}</p>
      {speaker.panel && (
        <p className="mt-2 line-clamp-2 text-xs text-muted-foreground">{speaker.panel}</p>
      )}
    </Link>
  );
}