import Link from "next/link";
import { Info, Megaphone, type LucideIcon } from "lucide-react";

export type SiteDocIdentityKind = "announcements" | "about";

const META: Record<
  SiteDocIdentityKind,
  { title: string; href: string; Icon: LucideIcon; fallbackLead: string }
> = {
  announcements: {
    title: "站点公告",
    href: "/announcements",
    Icon: Megaphone,
    fallbackLead: "官方通知与运营公告",
  },
  about: {
    title: "关于本站",
    href: "/",
    Icon: Info,
    fallbackLead: "站点说明与政策文档",
  },
};

/** 左栏身份卡：标明当前公文区 */
export default function SiteDocIdentity({
  kind,
  lead,
}: {
  kind: SiteDocIdentityKind;
  lead?: string;
}) {
  const m = META[kind];
  const Icon = m.Icon;
  const text = lead?.trim() || m.fallbackLead;

  return (
    <section className="j13-module shrink-0" aria-labelledby={`site-doc-id-${kind}`}>
      <p className="j13-module-title mb-3" id={`site-doc-id-${kind}`}>
        <Icon size={15} style={{ color: "var(--accent)" }} /> {m.title}
      </p>
      <Link href={m.href} className="flex items-center gap-3 group">
        <span
          className="w-11 h-11 rounded-xl flex items-center justify-center shrink-0"
          style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
          aria-hidden
        >
          <Icon size={20} strokeWidth={2} />
        </span>
        <span
          className="font-semibold text-[14.5px] truncate group-hover:text-[var(--accent)] transition-colors"
          style={{ color: "var(--ink)" }}
        >
          {m.title}
        </span>
      </Link>
      <p className="mt-2.5 text-[12.5px] leading-relaxed" style={{ color: "var(--ink-3)" }}>
        {text}
      </p>
    </section>
  );
}