import {nextFestivals} from "@/lib/festivals";
import {FestivalCard} from "@/components/Card";
import {useTranslations} from "next-intl";

export default function Home({params}:{params:{locale:string}}) {
  const t = useTranslations();
  const next5 = nextFestivals(params.locale, 5);

  return (
    <div className="space-y-10">
      <section className="rounded-3xl border border-slate-200 p-8 shadow-sm">
        <h1 className="text-3xl font-semibold tracking-tight">{t("home.title")}</h1>
        <p className="mt-2 text-slate-700">{t("home.subtitle")}</p>
      </section>

      <section>
        <div className="flex items-end justify-between gap-4">
          <h2 className="text-2xl font-semibold">{t("next5.title")}</h2>
          <a className="text-sm underline" href={`/${params.locale}/calendar`}>View all</a>
        </div>
        <div className="mt-5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
          {next5.map(f => (
            <FestivalCard key={f.slug} locale={params.locale} slug={f.slug}
              title={f.title} country={f.country} city={f.city}
              startDate={f.startDate} endDate={f.endDate} summary={f.summary} cover={f.cover}
            />
          ))}
        </div>
      </section>
    </div>
  );
}