import type { DocumentsListBlock } from "@/types/sections";
import { useLocale } from "@/i18n/LocaleContext";
import { FileText, ExternalLink } from "lucide-react";
import { UI } from "@/i18n/translations";

export function DocumentsList({ block }: { block: DocumentsListBlock }) {
  const { t } = useLocale();
  return (
    <section className="py-16 md:py-20">
      <div className="container">
        <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 max-w-3xl text-foreground/80 leading-relaxed"
            dangerouslySetInnerHTML={{ __html: t(block.intro) }}
          />
        )}
        <div className="mt-10 space-y-12">
          {block.groups.map((group, gi) => (
            <div key={gi}>
              <h3 className="font-display text-2xl sm:text-3xl text-primary border-b border-border pb-3 mb-6">
                {t(group.label)}
              </h3>
              <ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                {group.documents.map((doc, di) => (
                  <li key={di}>
                    <a
                      href={doc.href}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="group flex items-start gap-3 p-4 rounded-sm border border-border/70 bg-card hover:border-primary/40 hover:shadow-[0_10px_24px_-18px_hsl(var(--primary)/0.4)] transition-all"
                    >
                      <FileText className="h-5 w-5 mt-0.5 text-accent shrink-0" aria-hidden />
                      <div className="min-w-0 flex-1">
                        <p className="font-medium text-foreground group-hover:text-primary transition-colors">
                          {t(doc.title)}
                        </p>
                        {doc.date && (
                          <p className="text-xs text-muted-foreground mt-0.5">{doc.date}</p>
                        )}
                        {doc.description && (
                          <div
                            className="text-sm text-foreground/70 mt-1"
                            dangerouslySetInnerHTML={{ __html: t(doc.description) }}
                          />
                        )}
                      </div>
                      <ExternalLink
                        className="h-4 w-4 text-muted-foreground group-hover:text-primary shrink-0 mt-0.5"
                        aria-hidden
                      />
                      <span className="sr-only">{t(UI.cta.openPdf)}</span>
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}