import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { ColorPickerProps } from '@/src/types/builder';
import { ChromePicker } from 'react-color';

export function ColorPickerControl({ label, icon, value, onChange, onInputChange, onClear }: ColorPickerProps) {
  return (
    <div className='space-y-2'>
      <Label className='flex items-center gap-2 text-xs text-neutral-200'>
        {icon}
        {label}
      </Label>

      <div className='flex items-center gap-2'>
        <Popover>
          <PopoverTrigger asChild>
            <div
              className='w-10 h-10 border border-neutral-400 rounded cursor-pointer'
              style={{
                backgroundColor: value ?? 'transparent',
                backgroundImage: !value
                  ? 'linear-gradient(45deg, #999 25%, transparent 25%, transparent 75%, #999 75%, #999), linear-gradient(45deg, #999 25%, transparent 25%, transparent 75%, #999 75%, #999)'
                  : 'none',
                backgroundSize: '8px 8px',
                backgroundPosition: '0 0, 4px 4px',
              }}
            />
          </PopoverTrigger>
          <PopoverContent className='w-auto p-0 border-none z-[450]' side='right'>
            <ChromePicker color={value ?? '#ffffff'} onChange={onChange} disableAlpha={true} />
          </PopoverContent>
        </Popover>

        <Input value={value ?? ''} onChange={(e) => onInputChange(e.target.value)} placeholder='#ffffff' />

        {value && (
          <button onClick={onClear} className='text-xs text-neutral-400 hover:text-white'>
            Clear
          </button>
        )}
      </div>
    </div>
  );
}
