import type { PdfEmbedBlock } from "@/types/sections";
import { useLocale } from "@/i18n/LocaleContext";
import { UI } from "@/i18n/translations";
import { Download } from "lucide-react";

export function PdfEmbed({ block }: { block: PdfEmbedBlock }) {
  const { t } = useLocale();
  const height = block.height ?? 800;
  return (
    <section className="py-16 md:py-20">
      <div className="container">
        {block.title && (
          <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-8 flex flex-wrap gap-3">
          <a
            href={block.href}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 px-5 py-2.5 bg-primary text-primary-foreground rounded-sm hover:bg-primary/90 transition-colors"
          >
            <Download className="h-4 w-4" aria-hidden />
            {t(UI.cta.download)}
          </a>
        </div>
        <div className="mt-6 border border-border rounded-sm overflow-hidden bg-muted">
          <iframe
            src={block.href}
            title={block.title ? t(block.title) : "PDF"}
            className="w-full"
            style={{ height: `${height}px` }}
          />
        </div>
      </div>
    </section>
  );
}