interface ImageColorPickerProps {
  creationMode: "image" | "color";
  setCreationMode: (mode: "image" | "color") => void;
  selectedColor: string;
  setSelectedColor: (color: string) => void;
}

const AVAILABLE_COLORS = [
  "bg-blue-500",
  "bg-green-500",
  "bg-purple-500",
  "bg-red-500",
  "bg-yellow-500",
  "bg-indigo-500",
  "bg-pink-500",
  "bg-teal-500",
  "bg-orange-500",
  "bg-cyan-500",
];

export const ImageColorPicker = ({
  creationMode,
  setCreationMode,
  selectedColor,
  setSelectedColor,
}: ImageColorPickerProps) => {
  return (
    <div className="my-4 space-y-4">
      {/* Mode Toggle */}
      <div>
        <label className="block text-base font-semibold text-gray-800 dark:text-gray-300 mb-2">
          Style
        </label>
        <div className="flex rounded-md border border-gray-300 dark:border-gray-600 overflow-hidden">
          <button
            type="button"
            className={`flex-1 px-4 py-2 text-sm font-medium ${
              creationMode === "image"
                ? "bg-blue-600 text-white"
                : "bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600"
            } transition-colors`}
            onClick={() => setCreationMode("image")}
          >
            Image (Bientôt disponible)
          </button>
          <button
            type="button"
            className={`flex-1 px-4 py-2 text-sm font-medium ${
              creationMode === "color"
                ? "bg-blue-600 text-white"
                : "bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600"
            } transition-colors`}
            onClick={() => setCreationMode("color")}
          >
            Couleur
          </button>
        </div>
      </div>

      {/* Image Mode */}
      {creationMode === "image" && (
        <div className="space-y-4">
          {/* File Upload - Coming Soon */}
          <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 border border-dashed border-gray-300 dark:border-gray-600">
            <div className="text-center">
              <svg
                className="mx-auto h-8 w-8 text-gray-400"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
                />
              </svg>
              <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
                <span className="font-medium">Import d&apos;images</span>
              </p>
              <p className="text-xs text-gray-400 dark:text-gray-500">Bientôt disponible</p>
            </div>
          </div>

          {/* Commented out image selection */}
          {/* <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  Choisir une image
                </label>
                <div className="grid grid-cols-3 gap-2 max-h-40 overflow-y-auto">
                  {availableImages.map((image) => (
                    <button
                      key={image}
                      type="button"
                      className={`relative w-full h-16 rounded border-2 ${
                        selectedImage === image
                          ? "border-blue-500"
                          : "border-gray-300 dark:border-gray-600"
                      } hover:border-blue-400 transition-colors overflow-hidden`}
                      onClick={() => setSelectedImage(image)}
                    >
                      <img
                        src={image}
                        alt="Option"
                        className="w-full h-full object-cover"
                      />
                      {selectedImage === image && (
                        <div className="absolute inset-0 bg-blue-500/20 flex items-center justify-center">
                          <span className="text-blue-600 text-lg">✓</span>
                        </div>
                      )}
                    </button>
                  ))}
                </div>
              </div> */}
        </div>
      )}

      {/* Color Mode */}
      {creationMode === "color" && (
        <div>
          <label className="block text-base font-semibold text-gray-700 dark:text-gray-300 mb-2">
            Couleur
          </label>
          <div className="grid grid-cols-5 gap-2">
            {AVAILABLE_COLORS.map((color) => (
              <button
                key={color}
                type="button"
                className={`w-12 h-12 ${color} rounded-lg border-2 ${
                  selectedColor === color
                    ? "border-gray-800 dark:border-white scale-110"
                    : "border-gray-300 dark:border-gray-600"
                } hover:scale-105 transition-all duration-200`}
                onClick={() => setSelectedColor(color)}
              >
                {selectedColor === color && <span className="text-white text-lg">✓</span>}
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};
