'use client';

import { ColorVariant } from '@/components/products/utils/colorUtils';

interface ColorSelectorProps {
  colors: string[] | ColorVariant[];
  selectedColor: string | null;
  onColorSelect?: (color: string) => void;
  readonly?: boolean;
}

export function ColorSelector({ 
  colors, 
  selectedColor, 
  onColorSelect,
  readonly = false 
}: ColorSelectorProps) {
  // Check if we're dealing with ColorVariant[] or string[]
  const isVariantArray = colors.length > 0 && typeof colors[0] !== 'string';
  
  // Helper to get color from either a string or ColorVariant
  const getColor = (item: string | ColorVariant): string => {
    if (typeof item === 'string') return item;
    return item.color;
  };
  
  // Helper to get color name or just use the hex code
  const getColorName = (item: string | ColorVariant): string => {
    if (typeof item === 'string') return item;
    return item.colorName || item.color;
  };

  return (
    <div className="flex items-center mt-2 mb-3">
      {colors.map((colorItem, index) => {
        const color = getColor(colorItem);
        const colorName = getColorName(colorItem);
        const isSelected = selectedColor === color;
        const zIndex = isSelected ? 30 : 20 - index;
        const marginLeft = index === 0 ? '0' : '-10px';
        
        return (
          <div
            key={index}
            className={`rounded-full transition-all duration-200 relative ${readonly ? '' : 'cursor-pointer'}`}
            style={{ 
              backgroundColor: color,
              width: isSelected ? '42px' : '32px',
              height: isSelected ? '42px' : '32px',
              zIndex,
              marginLeft,
              borderWidth: isSelected ? '0px' : '0px'
            }}
            onClick={() => !readonly && onColorSelect && onColorSelect(color)}
            aria-label={readonly ? `Color: ${colorName}` : `Select color ${colorName}`}
            role={readonly ? 'presentation' : 'button'}
          />
        );
      })}
    </div>
  );
} 