import Image from "next/image";
import Link from "next/link";
import { ReactNode } from "react";

export const FALA_BR_URL =
  "https://falabr.cgu.gov.br/publico/Manifestacao/SelecionarTipoManifestacao.aspx?ReturnUrl=%2f";

interface LegalDocumentProps {
  title: string;
  pdfUrl: string;
  relatedLink: { href: string; label: string };
  children: ReactNode;
}

export function LegalDocument({ title, pdfUrl, relatedLink, children }: LegalDocumentProps) {
  return (
    <main className="min-h-screen bg-white px-4 py-10">
      <article className="mx-auto max-w-3xl text-zinc-800 leading-relaxed">
        <header className="flex flex-col items-center gap-4 text-center mb-10">
          <Image src="/logo_embrapa.png" alt="Logo Embrapa" width={180} height={180} priority />
          <h1 className="text-2xl font-bold text-zinc-900">{title}</h1>
          <p className="text-lg font-semibold text-[#006f36]">
            Aplicativo Índice de Desempenho Hídrico da Produção Leiteira - IDH Leite
          </p>
        </header>

        <div className="space-y-4 [&_h2]:text-lg [&_h2]:font-bold [&_h2]:text-zinc-900 [&_h2]:mt-8 [&_h3]:font-semibold [&_h3]:mt-4 [&_ul]:list-disc [&_ul]:pl-8 [&_ul]:space-y-1 [&_ol]:list-decimal [&_ol]:pl-8 [&_ol]:space-y-1 [&_a]:text-[#006f36] [&_a]:underline [&_a]:break-all">
          {children}
        </div>

        <footer className="mt-12 pt-6 border-t border-zinc-200 flex flex-wrap justify-center gap-6 text-sm">
          <Link href={relatedLink.href} className="text-[#006f36] underline">
            {relatedLink.label}
          </Link>
          <a href={pdfUrl} target="_blank" rel="noopener noreferrer" className="text-[#006f36] underline">
            Baixar versão em PDF
          </a>
        </footer>
      </article>
    </main>
  );
}