'use client';

import { cn } from '@/lib/utils/cn';

interface ColorDisplayProps {
  color: string;
  size?: 'sm' | 'md' | 'lg' | 'xl';
  className?: string;
  showBorder?: boolean;
}

export function ColorDisplay({
  color,
  size = 'lg',
  className,
  showBorder = true,
}: ColorDisplayProps) {
  const sizeClasses = {
    sm: 'h-16 w-16',
    md: 'h-32 w-32',
    lg: 'h-48 w-48',
    xl: 'h-64 w-64',
  };

  return (
    <div
      className={cn(
        'rounded-lg transition-all',
        showBorder && 'ring-2 ring-border',
        sizeClasses[size],
        className
      )}
      style={{ backgroundColor: color }}
      role="img"
      aria-label={`Color swatch: ${color}`}
    />
  );
}