import Link from "next/link";
import {format} from "date-fns";

export function FestivalCard(props:{
  locale: string; slug: string; title: string; country: string; city: string;
  startDate: string; endDate: string; summary: string; cover?: string;
}) {
  const {locale, slug, title, country, city, startDate, endDate, summary, cover} = props;
  const range = startDate === endDate
    ? format(new Date(startDate), "PPP")
    : `${format(new Date(startDate), "PPP")} → ${format(new Date(endDate), "PPP")}`;

  return (
    <Link href={`/${locale}/festivals/${slug}`} className="block rounded-3xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-md transition">
      <div className="h-44 bg-slate-100" style={cover ? {backgroundImage:`url(${cover})`, backgroundSize:"cover", backgroundPosition:"center"} : undefined} />
      <div className="p-5">
        <div className="text-xs text-slate-600">{range}</div>
        <div className="mt-1 text-lg font-semibold">{title}</div>
        <div className="text-sm text-slate-600">{city}, {country}</div>
        <p className="mt-3 text-sm text-slate-700 line-clamp-3">{summary}</p>
      </div>
    </Link>
  );
}