'use client';

import { HexColorPicker } from 'react-colorful';
import { Input } from '@/components/ui/input';
import { cn } from '@/lib/utils/cn';

interface ColorPickerProps {
  color: string;
  onChange: (color: string) => void;
  className?: string;
}

export function ColorPicker({ color, onChange, className }: ColorPickerProps) {
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    // Allow partial input while typing
    onChange(value);
  };

  return (
    <div className={cn('space-y-4', className)}>
      <HexColorPicker color={color} onChange={onChange} className="w-full" />
      <div className="space-y-2">
        <label htmlFor="color-input" className="text-sm font-medium">
          Color Value
        </label>
        <Input
          id="color-input"
          type="text"
          value={color}
          onChange={handleInputChange}
          placeholder="#ff0099 or rgb(255, 0, 153)"
          className="font-mono"
        />
      </div>
    </div>
  );
}