import React from 'react';
import { getFilamentColor, getColorStyle } from '../data/bambuLabColors';

interface ColorCellProps {
  colorName: string;
}

export const ColorCell: React.FC<ColorCellProps> = ({ colorName }) => {
  const colorMapping = getFilamentColor(colorName);
  const style = getColorStyle(colorMapping);

  return (
    <div className="flex items-center gap-2">
      <div 
        className="w-6 h-6 rounded border border-gray-300 dark:border-gray-600"
        style={style}
        title={Array.isArray(colorMapping.hex) ? colorMapping.hex.join(' - ') : colorMapping.hex}
      />
      <span>{colorName}</span>
    </div>
  );
};