"use client"

import type { LucideIcon } from "lucide-react"
import type { ReactNode } from "react"
import { cn } from "@/lib/utils"

export type SetupStep = {
  key: string
  label: string
  icon: LucideIcon
}

export type TournamentSetupNavProps = {
  steps: SetupStep[]
  activeStep: string
  onChange: (key: string) => void
  children?: ReactNode
}

export function TournamentSetupNav({
  steps,
  activeStep,
  onChange,
  children,
}: TournamentSetupNavProps) {
  return (
    <div className="flex flex-col gap-6">
      <nav aria-label="Turneringsoppsett-steg">
        {/*
          Every step is always selectable in any order — no gating, no completion
          checkmarks, no step numbers. On wide screens all 6 pills share the row
          equally; on narrow screens the row scrolls sideways rather than wrapping
          or collapsing, so every labelled step stays reachable.
        */}
        <div
          role="tablist"
          aria-orientation="horizontal"
          className="flex snap-x snap-mandatory gap-2 overflow-x-auto pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
        >
          {steps.map((step) => {
            const Icon = step.icon
            const isActive = step.key === activeStep
            return (
              <button
                key={step.key}
                type="button"
                role="tab"
                aria-selected={isActive}
                onClick={() => onChange(step.key)}
                className={cn(
                  "flex min-h-11 flex-1 shrink-0 snap-start items-center justify-center gap-2 rounded-2xl px-4 py-2.5",
                  "whitespace-nowrap text-sm font-bold transition-all duration-200 ease-in-out",
                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
                  "active:scale-[0.98]",
                  isActive
                    ? "bg-primary text-primary-foreground shadow-md shadow-black/8"
                    : "border border-border bg-card text-foreground hover:bg-accent/50",
                )}
              >
                <Icon aria-hidden="true" className="size-5 shrink-0" />
                <span>{step.label}</span>
              </button>
            )
          })}
        </div>
      </nav>

      <div>{children}</div>
    </div>
  )
}