import { forwardRef, type ReactNode, type SelectHTMLAttributes } from "react"

export interface SWSelectOption {
  value: string
  /** Shown text. Default `value`. */
  label?: string
  disabled?: boolean
}

export interface SWSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "value" | "defaultValue" | "onChange"> {
  /** Controlled value. */
  value?: string
  /** Uncontrolled initial value. */
  defaultValue?: string
  /** Options as data. `children` (`<option>` elements) can be used instead. */
  options?: readonly SWSelectOption[]
  /** The chosen value (native `change`: pointer, keyboard and the OS list). */
  onValueChange?: (value: string) => void
  children?: ReactNode
}

/**
 * HMDesign SW select (2026-10-20): a native select with the panel field look of the SW popups (28px, 1px inner-border
 * line, 4px radius, content surface, 12px text, the platform arrow and option list). For SWPopupRow (`field="none"`),
 * SWViewerField and any SWTheme content; tokens `--hm-sw-select-*`.
 */
export const SWSelect = forwardRef<HTMLSelectElement, SWSelectProps>(function SWSelect(
  { options, onValueChange, className, children, ...rest }, ref,
) {
  return (
    <select ref={ref} className={`hm-sw-select${className ? ` ${className}` : ""}`} onChange={event => onValueChange?.(event.currentTarget.value)} {...rest}>
      {options ? options.map(option => <option key={option.value} value={option.value} disabled={option.disabled}>{option.label ?? option.value}</option>) : children}
    </select>
  )
})