import type { EventsListBlock } from "@/types/sections";
import { useLocale } from "@/i18n/LocaleContext";
import { Calendar, MapPin } from "lucide-react";

function formatDate(iso: string, locale: "fr" | "en") {
  const d = new Date(iso + "T00:00:00");
  try
  {return new Intl.DateTimeFormat(locale === "fr" ? "fr-CA" : "en-CA", {
    day: "numeric",
    month: "long",
    year: "numeric",
  }).format(d);
  } catch {
    return iso;
  }
}

export function EventsList({ block }: { block: EventsListBlock }) {
  const { t, locale } = useLocale();
  return (
    <section className="py-16 md:py-20">
      <div className="container">
        <div className="max-w-3xl">
          <h2 className="font-display italic text-3xl sm:text-4xl md:text-5xl text-primary text-balance">
            {t(block.title)}
          </h2>
          {block.intro && (
            <div
              className="mt-4 text-base sm:text-lg leading-relaxed text-foreground/80"
              dangerouslySetInnerHTML={{ __html: t(block.intro) }}
            />
          )}
        </div>
        <ol className="mt-10 space-y-4">
          {block.events.map((e, i) => (
            <li
              key={i}
              className="grid gap-4 sm:grid-cols-[12rem_1fr] bg-card rounded-sm border border-border/70 p-6 transition-colors hover:border-primary/40"
            >
              <div className="flex flex-col items-start text-primary">
                <span className="inline-flex items-center gap-2 text-sm uppercase tracking-wider text-accent font-semibold">
                  <Calendar className="h-4 w-4" aria-hidden />
                  {formatDate(e.date, locale)}
                </span>
              </div>
              <div>
                <h3 className="font-display text-xl sm:text-2xl text-primary">
                  {t(e.title)}
                </h3>
                {e.location && (
                  <p className="mt-1 inline-flex items-center gap-1.5 text-sm text-muted-foreground">
                    <MapPin className="h-4 w-4" aria-hidden />
                    {t(e.location)}
                  </p>
                )}
                {e.description && (
                  <div
                    className="mt-2 text-foreground/80 leading-relaxed"
                    dangerouslySetInnerHTML={{ __html: t(e.description) }}
                  />
                )}
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}