"use client"

// Fane-stripe for tilskuer-visningen (/watch/[id], ADR-044, 2026-08-06).
// Bevisst IKKE en gjenbruk av RoundHeader (eiersidens fane-mekanisme) --
// RoundHeader render alltid et "Administrer"-tannhjul som åpner
// ManageRoundDialog (Rediger/Fullfør/Slett-runde), uansett hvilke handlere
// som gis inn. En tilskuer skal aldri kunne nå de handlingene i det hele
// tatt -- denne komponenten inneholder rett og slett ingen slik kode, så
// det finnes ingen vei til at de vises ved et uhell.

import Link from "next/link"
import { cn } from "@/lib/utils"

export type WatchTab = "score" | "scorecard" | "leaderboard"

const TABS: { key: WatchTab; label: string }[] = [
  { key: "score", label: "Score" },
  { key: "scorecard", label: "Scorekort" },
  { key: "leaderboard", label: "Leaderboard" },
]

export function WatchTabs({ roundId, active }: { roundId: string; active: WatchTab }) {
  const hrefFor = (tab: WatchTab) =>
    tab === "score" ? `/watch/${roundId}` : `/watch/${roundId}/${tab}`

  return (
    <nav aria-label="Rundevisning" className="mx-auto w-full max-w-xl px-4 pt-3">
      <div className="inline-flex w-full gap-1 rounded-full bg-muted p-1">
        {TABS.map((tab) => (
          <Link
            key={tab.key}
            href={hrefFor(tab.key)}
            aria-current={active === tab.key ? "page" : undefined}
            className={cn(
              "flex min-h-11 flex-1 items-center justify-center rounded-full px-3 text-sm font-bold transition-all duration-200 ease-in-out",
              active === tab.key
                ? "bg-primary text-primary-foreground"
                : "text-muted-foreground hover:text-foreground",
            )}
          >
            {tab.label}
          </Link>
        ))}
      </div>
    </nav>
  )
}