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

export interface SegOption<T extends string> {
  value: T
  label: string
  title?: string
}

/**
 * The segmented pill control: options on a neutral-200 track, the active one
 * lifted on a neutral-100 pill with a soft shadow. Used for seasons, the theme,
 * units, and read-only status displays (pass `disabled`).
 */
export function Seg<T extends string>({
  options,
  value,
  onChange,
  disabled,
  className,
  optionClassName,
  label,
}: {
  options: SegOption<T>[]
  value: T
  onChange?: (v: T) => void
  disabled?: boolean
  className?: string
  optionClassName?: string
  /** Accessible group name. */
  label?: string
}) {
  return (
    <span className={cn('seg', className)} role="group" aria-label={label}>
      {options.map((o) => (
        <button
          key={o.value}
          type="button"
          className={cn('seg-opt', optionClassName)}
          aria-pressed={o.value === value}
          disabled={disabled}
          title={o.title}
          onClick={() => onChange?.(o.value)}
        >
          {o.label}
        </button>
      ))}
    </span>
  )
}