import type { Locale } from "@/i18n/routes";
import type { Profile } from "@/lib/models";
import { getDict } from "@/i18n/dictionaries";

const KIND_LABEL: Record<string, { de: string; en: string }> = {
  git: { de: "git", en: "git" },
  service: { de: "service", en: "service" },
  external: { de: "extern", en: "external" },
  social: { de: "social", en: "social" },
};

export function LinksSection({ profile, locale }: { profile: Profile; locale: Locale }) {
  const dict = getDict(locale);
  if (profile.links.length === 0) return null;
  return (
    <section aria-labelledby="links-heading" className="ascii-box">
      <div className="section-heading">
        <span className="section-heading__label">~/links</span>
        <h2 id="links-heading" className="section-heading__title">{dict.home.linksLabel}</h2>
      </div>
      <ul className="divide-y divide-[var(--hairline)]">
        {profile.links.map((l, i) => {
          const kindLabel = KIND_LABEL[l.kind]?.[locale] ?? l.kind;
          const external = !l.href.startsWith("/") && !l.href.startsWith("#");
          return (
            <li key={i} className="flex items-center gap-3 py-2 font-mono text-sm">
              <span className="w-20 text-xs uppercase text-muted">[{kindLabel}]</span>
              <a
                href={l.href}
                className="flex-1 truncate text-[var(--fg)] hover:text-accent"
                {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
              >
                {l.label}
              </a>
              <span className="text-muted">{external ? "↗" : "→"}</span>
            </li>
          );
        })}
      </ul>
    </section>
  );
}
