import {
  BUSINESS_PRIMARY_COLOR_IDS,
  BUSINESS_PRIMARY_COLOR_PALETTE,
  type BusinessPrimaryColorId,
} from '../utils/businessPrimaryColors'
import styles from './PrimaryColorPicker.module.css'

interface PrimaryColorPickerProps {
  value: BusinessPrimaryColorId
  onChange: (value: BusinessPrimaryColorId) => void
  disabled?: boolean
}

export function PrimaryColorPicker({ value, onChange, disabled = false }: PrimaryColorPickerProps) {
  return (
    <div className={styles.wrap}>
      <div className={styles.grid} role="radiogroup" aria-label="Primary color">
        {BUSINESS_PRIMARY_COLOR_IDS.map((colorId) => {
          const tokens = BUSINESS_PRIMARY_COLOR_PALETTE[colorId]
          const selected = value === colorId

          return (
            <button
              key={colorId}
              type="button"
              role="radio"
              aria-checked={selected}
              aria-label={tokens.label}
              className={`${styles.swatch} ${selected ? styles.swatchSelected : ''}`}
              disabled={disabled}
              onClick={() => onChange(colorId)}
            >
              <span
                className={styles.swatchColor}
                style={{ backgroundColor: tokens.primary }}
                aria-hidden="true"
              />
              <span className={styles.swatchLabel}>{tokens.label}</span>
            </button>
          )
        })}
      </div>
    </div>
  )
}
