import { Cancel } from '../../../common/icons/icons';
import {
  CloseButton,
  ColorOption,
  ColorsGrid,
  PaletteContainer,
  PaletteHeader,
  PaletteTitle,
} from './ColorPalette.style';

const ColorPalette = ({ selectedColor, onColorSelect, onClose }) => {
  const colors = [
    '#FFFFFF',
    '#C2D59A',
    '#EAF0DD',
    '#D7E3BC',
    '#F9BE8E',
    '#FDE9D8',
    '#FBD4B4',
    '#FFFF66',
    '#FFFFCC',
    '#FFFF99',
    '#933634',
    '#E5B7B6',
    '#D89493',
    '#95B4D6',
    '#DAE5F1',
    '#B7CCE4',
    '#538DD4',
    '#8DB3E2',
    '#C5D8F0',
  ];

  return (
    <PaletteContainer>
      <PaletteHeader>
        <PaletteTitle>Выберите цвет</PaletteTitle>
        <CloseButton onClick={onClose} title="Закрыть">
          ×
        </CloseButton>
      </PaletteHeader>

      <ColorsGrid>
        {colors.map((color, index) => (
          <ColorOption
            key={index}
            color={color}
            isWhite={color === '#FFFFFF'}
            isSelected={color === selectedColor}
            onClick={() => onColorSelect(color === '#FFFFFF' ? null : color)}
            title={color === '#FFFFFF' ? 'Удалить заливку' : color}
          >
            {color === '#FFFFFF' && (
              <Cancel style={{ pointerEvents: 'none', opacity: 0.4 }} />
            )}
          </ColorOption>
        ))}
      </ColorsGrid>
    </PaletteContainer>
  );
};

export default ColorPalette;
