import Link from "next/link";
import type { SponsorshipAdminStrings } from "@/i18n/sponsorship/admin";

export type SponsorshipSection = "overview" | "offers" | "subscriptions" | "loyalty";

const SECTIONS: { key: SponsorshipSection; href: string }[] = [
  { key: "overview", href: "/admin/patenschaften" },
  { key: "offers", href: "/admin/patenschaften/angebote" },
  { key: "subscriptions", href: "/admin/patenschaften/abos" },
  { key: "loyalty", href: "/admin/patenschaften/treuestufen" },
];

/**
 * Unternavigation des Bereichs. Die Seitenleiste fuehrt mit einem Eintrag
 * "Patenschaften" hierher; die vier Teile liegen als Reiter darunter — so
 * bleibt die Seitenleiste kurz, und es gibt dort nie zwei aktive Eintraege.
 */
export function SponsorshipTabs({ active, labels }: { active: SponsorshipSection; labels: SponsorshipAdminStrings["tabs"] }) {
  return (
    <nav aria-label={labels.ariaLabel} className="mb-6 flex gap-1 overflow-x-auto border-b border-ink/10">
      {SECTIONS.map((section) => {
        const selected = section.key === active;
        return (
          <Link
            key={section.key}
            href={section.href}
            aria-current={selected ? "page" : undefined}
            className={`-mb-px whitespace-nowrap border-b-2 px-4 py-2 text-sm transition-colors ${
              selected ? "border-heading text-heading" : "border-transparent text-ink/60 hover:text-heading"
            }`}
          >
            {labels[section.key]}
          </Link>
        );
      })}
    </nav>
  );
}