'use client';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { ColorPickerButtonProps } from '@/types/color';
import { useState } from 'react';
import { ChromePicker } from 'react-color';

export function ColorPickerButton({ name, label, color, onColorChange }: ColorPickerButtonProps) {
  const [activePickerId, setActivePickerId] = useState<string | null>(null);

  return (
    <div className='relative'>
      <Button
        variant='outline'
        onClick={() => setActivePickerId(activePickerId === name ? null : name)}
        className={cn(
          'w-full flex items-center justify-between p-3 text-left',
          'border-neutral-400 hover:border-neutral-300 hover:bg-neutral-700 rounded-sm',
          'bg-neutral-800 text-white'
        )}
      >
        <div className='flex items-center gap-3'>
          <div className='w-6 h-6 rounded-sm border border-neutral-400' style={{ backgroundColor: color }} />
          <span className='text-sm'>{label}</span>
        </div>
        <span className='text-sm uppercase'>{color}</span>
      </Button>

      {activePickerId === name && (
        <div className='absolute z-10 mt-2 w-full'>
          <ChromePicker
            color={color}
            onChange={(colorResult) => onColorChange(colorResult, name)}
            styles={{
              default: {
                picker: {
                  backgroundColor: '#1F2937',
                  border: '1px solid #9CA3AF',
                  borderRadius: '0.25rem',
                  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
                  width: '100%',
                },
                swatch: {
                  border: '1px solid white',
                  borderRadius: '50%',
                  height: '16px',
                  width: '16px',
                },
                alpha: {
                  backgroundColor: 'white',
                },
              },
            }}
          />
        </div>
      )}
    </div>
  );
}
