import Link from "next/link";
import { href, t, type Locale } from "@/lib/i18n";
export function SiteFooter({ locale, attribution, institution }: { locale: Locale; attribution: { en: string; fr: string } | null; institution: { name_en: string; name_fr: string; department_en?: string; department_fr?: string; url?: string } | null }) {
  const d = t(locale); const year = new Date().getFullYear();
  return (
    <footer className="mt-16 border-t border-line bg-bg-3/60">
      <div className="container py-10 grid gap-8 md:grid-cols-3 text-sm">
        <div>
          <p className="serif text-lg text-fg">{d.site.title}</p>
          <p className="text-fg-3 mt-1">{d.site.secondary}</p>
          {institution && <p className="text-fg-2 mt-3">{locale === "fr" ? institution.name_fr : institution.name_en}{(locale === "fr" ? institution.department_fr : institution.department_en) ? ` · ${locale === "fr" ? institution.department_fr : institution.department_en}` : ""}</p>}
        </div>
        <div>
          <p className="label mb-2">{d.footer.attribution}</p>
          <p className="text-fg-2 leading-relaxed">{attribution ? (locale === "fr" ? attribution.fr : attribution.en) : ""}</p>
        </div>
        <div className="grid grid-cols-2 gap-x-4 gap-y-1.5">
          {[["/papers", d.nav.papers], ["/series", d.nav.series], ["/topics", d.nav.topics], ["/methods", d.nav.methods], ["/datasets", d.nav.datasets], ["/authors", d.nav.authors], ["/research-map", d.nav.map], ["/timeline", d.nav.timeline], ["/search", d.nav.search], ["/citation", d.nav.citation], ["/about", d.nav.about]].map(([p, l]) => <Link key={p} href={href(locale, p)} className="text-fg-2 no-underline hover:underline">{l}</Link>)}
          <Link href="/api/docs" className="text-fg-2 no-underline hover:underline">{d.nav.api}</Link>
          <a href="/feed.xml" className="text-fg-2 no-underline hover:underline">{d.footer.feed}</a>
          <a href="/api/oai?verb=Identify" className="text-fg-2 no-underline hover:underline">{d.footer.oai}</a>
          <a href="/sitemap.xml" className="text-fg-2 no-underline hover:underline">{d.footer.sitemap}</a>
          <Link href="/admin" className="text-fg-3 no-underline hover:underline">{d.nav.admin}</Link>
        </div>
      </div>
      <div className="container pb-8 text-xs text-fg-3 flex flex-wrap gap-x-4 gap-y-1">
        <span>© {year} Simon-Pierre Boucher.</span><span>{d.footer.rights}</span><span>{d.footer.built}</span>
      </div>
    </footer>
  );
}