"use client"

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { cn } from "@/lib/utils"

// Delt mellom ScoringWizard sitt "details"-steg (round-detail.tsx,
// utslags-kølle) og ShotMeasurementSheet (ADR-048, slag-for-slag måling) --
// ren utrekking 2026-08-08, ingen atferdsendring for veiviserens
// eksisterende bruk.
export function ClubPicker({
  value,
  onChange,
  ownBagClubs,
  readOnly = false,
  label = "Kølle",
}: {
  value: string
  onChange: (club: string) => void
  ownBagClubs: string[]
  readOnly?: boolean
  label?: string
}) {
  return (
    <div className="flex flex-col gap-2">
      <Label className="text-base font-semibold">{label}</Label>
      {ownBagClubs.length > 0 ? (
        <div className="flex flex-wrap gap-2">
          {ownBagClubs.map((club) => {
            const selected = value === club
            return (
              <button
                key={club}
                type="button"
                disabled={readOnly}
                onClick={() => onChange(club)}
                aria-pressed={selected}
                className={cn(
                  "flex min-h-11 items-center justify-center rounded-xl border px-3 text-sm font-bold transition-colors disabled:opacity-100",
                  selected
                    ? "border-primary bg-primary text-primary-foreground"
                    : "border-border bg-card text-foreground hover:bg-accent/50",
                )}
              >
                {club}
              </button>
            )
          })}
        </div>
      ) : (
        <Input
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder="F.eks. Driver, 3-jern"
          disabled={readOnly}
          className="h-12 rounded-2xl text-base"
        />
      )}
    </div>
  )
}
