import { SelectField, type SelectOption } from './SelectField'
import { t } from '@/lib/i18n'

export interface ColumnCountSelectProps {
  label?: string
  value: string
  onChange: (value: string) => void
  /** Allowed column counts (as strings). Defaults to 1-4. */
  options?: string[]
  disabled?: boolean
  description?: string
}

/**
 * Template: ColumnCountSelect
 * Canonical dropdown for grid column count selectors.
 */
export function ColumnCountSelect({
  label = t('Column Count'),
  value,
  onChange,
  options = ['1', '2', '3', '4'],
  disabled = false,
  description,
}: ColumnCountSelectProps) {
  const opts: SelectOption[] = options.map((v) => ({ value: v, label: v }))
  return (
    <SelectField
      label={label}
      value={value}
      onChange={onChange}
      options={opts}
      disabled={disabled}
      description={description}
    />
  )
}

export default ColumnCountSelect

