kit/components/color/ColorSwatch.tsx

'use client';

import { cn } from '@/lib/utils/cn';
import { Check, Copy } from 'lucide-react';
import { useState } from 'react';
import { toast } from 'sonner';

interface ColorSwatchProps {
  color: string;
  size?: 'sm' | 'md' | 'lg';
  showLabel?: boolean;
  onClick?: () => void;
  className?: string;
}

export function ColorSwatch({ color, size = 'md', showLabel = true, onClick, className }: ColorSwatchProps) {
  const [copied, setCopied] = useState(false);

  const handleClick = () => {
    if (onClick) { onClick(); return; }
    navigator.clipboard.writeText(color);
    setCopied(true);
    toast.success(`Copied ${color}`);
    setTimeout(() => setCopied(false), 1500);
  };

  return (
    <button
      onClick={handleClick}
      title={color}
      aria-label={`Color ${color}`}
      className={cn(
        'group relative w-full rounded-lg overflow-hidden border border-white/8 transition-all',
        'hover:scale-[1.04] hover:border-white/20 hover:shadow-lg hover:shadow-black/20',
        size === 'sm' && 'h-10',
        size === 'md' && 'h-14',
        size === 'lg' && 'h-20',
        className
      )}
      style={{ backgroundColor: color }}
    >
      <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/25">
        {copied
          ? <Check className="w-3.5 h-3.5 text-white drop-shadow" />
          : <Copy className="w-3.5 h-3.5 text-white drop-shadow" />
        }
      </div>
      {showLabel && (
        <div className="absolute bottom-0 inset-x-0 px-1 py-0.5 text-[9px] font-mono text-white/70 bg-black/25 truncate text-center leading-tight">
          {color}
        </div>
      )}
    </button>
  );
}