import { PROJECT_COLORS_PALETTE } from '../utils/projectUtils'
import './Integrations.css'

function ColorPickerModal({ onClose, onColorSelect, currentColor }) {
  const handleColorClick = (color) => {
    onColorSelect(color)
    onClose()
  }

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" onClick={onClose}>
      <div className="bg-white rounded-lg max-w-md w-90 shadow-lg max-h-[90vh] flex flex-col" onClick={(e) => e.stopPropagation()}>
        {/* Заголовок с кнопкой закрытия */}
        <div className="flex justify-between items-center p-4 border-b border-gray-200">
          <h3 className="text-lg font-semibold text-gray-800">Выберите цвет проекта</h3>
          <button
            onClick={onClose}
            className="flex items-center justify-center w-10 h-10 rounded-full bg-white hover:bg-gray-100 text-gray-600 hover:text-gray-800 border border-gray-200 hover:border-gray-300 transition-all duration-200 shadow-sm hover:shadow-md"
            title="Закрыть"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </button>
        </div>

        {/* Контент - сетка цветов */}
        <div className="flex-1 overflow-y-auto p-6">
          <div className="grid grid-cols-6 gap-3">
            {PROJECT_COLORS_PALETTE.map((color, index) => (
              <button
                key={index}
                onClick={() => handleColorClick(color)}
                className={`
                  w-12 h-12 rounded-full 
                  border-2 transition-all duration-200
                  hover:scale-110 hover:shadow-lg
                  ${currentColor === color 
                    ? 'border-gray-800 shadow-md ring-2 ring-offset-2 ring-gray-400' 
                    : 'border-gray-300 hover:border-gray-500'
                  }
                `}
                style={{ backgroundColor: color }}
                title={color}
              >
                {currentColor === color && (
                  <div className="flex items-center justify-center h-full">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                )}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default ColorPickerModal