import type { ReactNode } from "react";
import Link from "next/link";
import { ArrowUpRight } from "lucide-react";
import { seoCatalog, type Locale, type SeoCatalogKey } from "@/lib/seo/catalog";

const linkClass =
  "underline decoration-[#CBD5E1] hover:decoration-black text-black font-medium";

/** In-article internal link with consistent styling and catalog-backed href. */
export function SeoLink({
  lang,
  to,
  children,
}: {
  lang: Locale;
  to: SeoCatalogKey;
  children: ReactNode;
}) {
  return (
    <Link href={seoCatalog[to].href(lang)} className={linkClass}>
      {children}
    </Link>
  );
}

export function RelatedReading({
  lang,
  keys,
  heading,
}: {
  lang: Locale;
  keys: SeoCatalogKey[];
  heading?: string;
}) {
  const isDe = lang === "de";
  const title =
    heading ?? (isDe ? "Weiterlesen auf ScanReceipts" : "Keep reading on ScanReceipts");

  return (
    <section className="mt-14 pt-10 border-t border-[#E2E8F0]">
      <div className="flex items-center gap-2 mb-3">
        <span className="w-2.5 h-2.5 bg-black" />
        <span className="font-mono text-xs uppercase tracking-caps font-semibold text-[#475569]">
          {isDe ? "WEITERLESEN" : "RELATED READING"}
        </span>
      </div>
      <h2 className="font-display text-2xl sm:text-3xl font-bold tracking-tight text-black mb-6">
        {title}
      </h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {keys.map((key) => {
          const item = seoCatalog[key];
          return (
            <Link
              key={key}
              href={item.href(lang)}
              className="group flex flex-col justify-between bg-white border border-[#E2E8F0] p-5 hover:border-black transition-colors"
            >
              <div>
                <div className="flex items-center gap-2 mb-2">
                  <span className="w-1.5 h-1.5 bg-black" />
                  <span className="font-mono text-[11px] uppercase tracking-caps font-semibold text-[#475569]">
                    {item.eyebrow[lang]}
                  </span>
                </div>
                <h3 className="font-display text-lg font-bold tracking-tight text-black leading-snug mb-2">
                  {item.title[lang]}
                </h3>
                <p className="text-sm text-[#475569] leading-relaxed">{item.description[lang]}</p>
              </div>
              <div className="mt-4 flex items-center gap-1.5 font-mono text-xs uppercase tracking-caps font-semibold text-black">
                <span>{isDe ? "Öffnen" : "Open"}</span>
                <ArrowUpRight className="w-3.5 h-3.5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
              </div>
            </Link>
          );
        })}
      </div>
    </section>
  );
}
