import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
} from "@/components/ui/pagination";

const sections = [
  { slug: "weapon", label: "Weapons" },
  { slug: "artifact", label: "Artifacts & Stats" },
  { slug: "constellations", label: "Constellations" },
  { slug: "team", label: "Team Calc" },
  { slug: "extra", label: "Extra" },
] as const;

export function GuideSectionNav({
  characterKey,
  current,
}: {
  characterKey: string;
  current: "overview" | (typeof sections)[number]["slug"];
}) {
  return (
    <Pagination className="justify-start overflow-x-auto rounded-xl border bg-card p-2">
      <PaginationContent>
        <PaginationItem>
          <PaginationLink
            href={`/admin/${characterKey}`}
            size="default"
            isActive={current === "overview"}
          >
            Overview
          </PaginationLink>
        </PaginationItem>
        {sections.map((section) => (
          <PaginationItem key={section.slug}>
            <PaginationLink
              href={`/admin/${characterKey}/${section.slug}`}
              size="default"
              isActive={current === section.slug}
            >
              {section.label}
            </PaginationLink>
          </PaginationItem>
        ))}
      </PaginationContent>
    </Pagination>
  );
}