import { cn } from '@/lib/utils'

/** Tek seçimlik düğme grubu (ör. Haftalık / Aylık). Her düğme ≥ 44 px yüksek. */
export function Segmented<T extends string>({
  label,
  value,
  options,
  onChange,
}: {
  /** Ekran okuyucu için grup adı */
  label: string
  value: T
  options: readonly { value: T; label: string }[]
  onChange: (value: T) => void
}) {
  return (
    <div role="group" aria-label={label} className="flex rounded-lg border p-0.5">
      {options.map((o) => (
        <button
          key={o.value}
          type="button"
          aria-pressed={value === o.value}
          onClick={() => onChange(o.value)}
          className={cn(
            'min-h-11 rounded-md px-3 text-sm font-medium sm:px-4',
            value === o.value ? 'bg-primary text-primary-foreground' : 'hover:bg-muted',
          )}
        >
          {o.label}
        </button>
      ))}
    </div>
  )
}