import { cn } from './cn';

export interface ColorSwatch {
  id?: string;
  label?: string;
  /** CSS background value (ex: '#ff0000' or 'url("...") center/cover no-repeat') */
  value: string;
}

export interface ColorSwatchGridProps {
  colors: ColorSwatch[];
  /** Stable selected swatch id. */
  activeId?: string;
  onChange?: (color: ColorSwatch) => void;
  className?: string;
}

export function ColorSwatchGrid({ colors, activeId, onChange, className }: ColorSwatchGridProps) {
  return (
    <div className={cn('ask-grid ask-grid-cols-8 ask-gap-1', className)}>
      {colors.map((c, idx) => {
        const active = !!activeId && c.id === activeId;
        return (
          <button
            key={c.id ?? `${c.value}-${idx}`}
            type="button"
            title={c.label ?? c.value}
            className={cn(
              'ask-h-6 ask-w-6 ask-rounded-md ask-border ask-border-borderSubtle',
              active && 'ask-ring-2 ask-ring-primary ask-border-primary',
            )}
            style={{ background: c.value }}
            onClick={() => onChange?.(c)}
          />
        );
      })}
    </div>
  );
}
