import { useState } from "react";

const GRID_SIZE = 50; // 50x50 grid
const PIXEL_PRICE = 0.25;

export default function PixelGrid() {
  const [pixels, setPixels] = useState(Array(GRID_SIZE * GRID_SIZE).fill("#ffffff"));
  const [selectedColor, setSelectedColor] = useState("#000000");
  const [purchased, setPurchased] = useState(new Set());

  const handlePixelClick = (index) => {
    if (purchased.has(index)) {
      setPixels((prev) => {
        const newPixels = [...prev];
        newPixels[index] = selectedColor;
        return newPixels;
      });
    } else {
      if (window.confirm(`Purchase this pixel for $${PIXEL_PRICE.toFixed(2)}?`)) {
        setPurchased((prev) => new Set([...prev, index]));
        setPixels((prev) => {
          const newPixels = [...prev];
          newPixels[index] = selectedColor;
          return newPixels;
        });
      }
    }
  };

  return (
    <div className="flex flex-col items-center gap-4 p-4">
      <input 
        type="color" 
        value={selectedColor} 
        onChange={(e) => setSelectedColor(e.target.value)} 
        className="mb-2"
      />
      <div 
        className="grid"
        style={{ display: "grid", gridTemplateColumns: `repeat(${GRID_SIZE}, 10px)`, gap: "1px" }}
      >
        {pixels.map((color, index) => (
          <div
            key={index}
            className="w-4 h-4 border cursor-pointer"
            style={{ backgroundColor: color, width: "10px", height: "10px", border: "1px solid #ccc" }}
            onClick={() => handlePixelClick(index)}
          />
        ))}
      </div>
    </div>
  );
}
}