import partsData from '../../data/index.js';

export default function ColorsStep({ config, updateConfig }) {
  const handlePrimaryColorSelect = (color) => {
    updateConfig({ primaryColor: color.id });
  };

  const handleAccentColorSelect = (color) => {
    updateConfig({ accentColor: color.id });
  };

  return (
    <div>
      <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Select Colors</h2>
      <p className="text-gray-600 dark:text-gray-300 mb-6">
        Choose primary and accent colors for your OSSM build.
      </p>

      <div className="space-y-8">
        {/* Primary Color */}
        <div>
          <h3 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Primary Color</h3>
          <div className="grid grid-cols-3 md:grid-cols-6 gap-4">
            {partsData.colors.primary.map((color) => (
              <button
                key={color.id}
                onClick={() => handlePrimaryColorSelect(color)}
                className={`flex flex-col items-center p-4 border-2 rounded-lg transition-all ${
                  config.primaryColor === color.id
                    ? 'border-blue-600 dark:border-blue-500 bg-blue-50 dark:bg-blue-900/30'
                    : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
                }`}
              >
                <div
                  className="w-16 h-16 rounded-full mb-2 border-2 border-gray-300 dark:border-gray-600"
                  style={{ backgroundColor: color.hex }}
                />
                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                  {color.name}
                </span>
                {config.primaryColor === color.id && (
                  <div className="mt-1 w-5 h-5 bg-blue-600 dark:bg-blue-500 rounded-full flex items-center justify-center">
                    <svg
                      className="w-3 h-3 text-white"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M5 13l4 4L19 7"
                      />
                    </svg>
                  </div>
                )}
              </button>
            ))}
          </div>
        </div>

        {/* Accent Color */}
        <div>
          <h3 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Accent Color</h3>
          <div className="grid grid-cols-3 md:grid-cols-6 gap-4">
            {partsData.colors.accent.map((color) => (
              <button
                key={color.id}
                onClick={() => handleAccentColorSelect(color)}
                className={`flex flex-col items-center p-4 border-2 rounded-lg transition-all ${
                  config.accentColor === color.id
                    ? 'border-blue-600 dark:border-blue-500 bg-blue-50 dark:bg-blue-900/30'
                    : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
                }`}
              >
                <div
                  className="w-16 h-16 rounded-full mb-2 border-2 border-gray-300 dark:border-gray-600"
                  style={{ backgroundColor: color.hex }}
                />
                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                  {color.name}
                </span>
                {config.accentColor === color.id && (
                  <div className="mt-1 w-5 h-5 bg-blue-600 dark:bg-blue-500 rounded-full flex items-center justify-center">
                    <svg
                      className="w-3 h-3 text-white"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M5 13l4 4L19 7"
                      />
                    </svg>
                  </div>
                )}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
