'use client';

import { Plus, X } from 'lucide-react';
import { DEFAULT_PALETTE } from '@/lib/color-utils';
import { cn } from '@/lib/utils';

interface ColorSwatchesProps {
  onColorSelect: (color: string) => void;
  currentColor: string;
  customSwatches?: string[];
  onAddSwatch?: (color: string) => void;
  onRemoveSwatch?: (color: string) => void;
}

export function ColorSwatches({
  onColorSelect,
  currentColor,
  customSwatches = [],
  onAddSwatch,
  onRemoveSwatch,
}: ColorSwatchesProps) {
  return (
    <div className="space-y-3">
      {/* Default palette */}
      <div>
        <h3 className="text-xs font-medium text-muted-foreground mb-2">Default Colors</h3>
        <div className="grid grid-cols-10 gap-1">
          {DEFAULT_PALETTE.map((color) => (
            <button
              key={color}
              onClick={() => onColorSelect(color)}
              className={cn(
                'w-6 h-6 rounded border-2 transition-all hover:scale-110',
                currentColor.toUpperCase() === color.toUpperCase()
                  ? 'border-primary ring-2 ring-primary/50'
                  : 'border-border hover:border-primary/50'
              )}
              style={{ backgroundColor: color }}
              title={color}
            />
          ))}
        </div>
      </div>

      {/* Custom swatches */}
      {(customSwatches.length > 0 || onAddSwatch) && (
        <div>
          <div className="flex items-center justify-between mb-2">
            <h3 className="text-xs font-medium text-muted-foreground">Custom</h3>
            {onAddSwatch && (
              <button
                onClick={() => onAddSwatch(currentColor)}
                className="p-1 hover:bg-accent rounded transition-colors"
                title="Add current color"
              >
                <Plus className="h-3 w-3" />
              </button>
            )}
          </div>

          {customSwatches.length > 0 ? (
            <div className="grid grid-cols-10 gap-1">
              {customSwatches.map((color) => (
                <div key={color} className="relative group">
                  <button
                    onClick={() => onColorSelect(color)}
                    className={cn(
                      'w-6 h-6 rounded border-2 transition-all hover:scale-110',
                      currentColor.toUpperCase() === color.toUpperCase()
                        ? 'border-primary ring-2 ring-primary/50'
                        : 'border-border hover:border-primary/50'
                    )}
                    style={{ backgroundColor: color }}
                    title={color}
                  />
                  {onRemoveSwatch && (
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        onRemoveSwatch(color);
                      }}
                      className="absolute -top-1 -right-1 w-4 h-4 bg-destructive text-destructive-foreground rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
                      title="Remove"
                    >
                      <X className="h-2.5 w-2.5" />
                    </button>
                  )}
                </div>
              ))}
            </div>
          ) : (
            <p className="text-xs text-muted-foreground italic">
              No custom swatches yet
            </p>
          )}
        </div>
      )}
    </div>
  );
}