import { cn } from './cva'
import { RadioGroup, Radio } from './RadioGroup'

export interface ColorPickerProps {
  value?: string
  onChange(v: string): void
  presets: Array<{ id: string; label: string; value: string }>
  'aria-label'?: string
  'aria-labelledby'?: string
  className?: string
}

export function ColorPicker({
  value,
  onChange,
  presets,
  className,
  ...aria
}: ColorPickerProps) {
  return (
    <RadioGroup
      value={value}
      onValueChange={onChange}
      className={cn('flex flex-row flex-wrap gap-3', className)}
      {...aria}
    >
      {presets.map((preset) => (
        <label
          key={preset.id}
          className="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm text-fg hover:bg-[var(--mod-color-accent-a3)] active:bg-[var(--mod-color-accent-a4)]"
        >
          <Radio value={preset.value} aria-label={preset.label} />
          <span
            className="h-4 w-4 shrink-0 rounded-full border border-border"
            style={{ backgroundColor: preset.value }}
            aria-hidden
          />
          <span>{preset.label}</span>
        </label>
      ))}
    </RadioGroup>
  )
}