/**
 * Color Picker Input
 * 
 * A reusable color picker with a styled square swatch and hex text input.
 * Replaces native <input type="color"> with a cohesive design.
 */

import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';

interface ColorPickerInputProps {
  label: string;
  value: string;
  onChange: (value: string) => void;
  id?: string;
}

export function ColorPickerInput({ label, value, onChange, id }: ColorPickerInputProps) {
  return (
    <div className="flex items-center justify-between gap-3">
      <Label className="text-sm flex-1">{label}</Label>
      <div className="flex items-center gap-2">
        <Input
          type="text"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          className="w-20 h-8 text-xs font-mono"
          id={id}
        />
        <label className="relative cursor-pointer">
          <span
            className="block w-8 h-8 rounded-[4px] border-2 border-slate-300"
            style={{ backgroundColor: value }}
          />
          <input
            type="color"
            value={value}
            onChange={(e) => onChange(e.target.value)}
            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
          />
        </label>
      </div>
    </div>
  );
}

export default ColorPickerInput;