import React, { useState } from "react";

export default function BedroomDesigner() {
  const [wallColor, setWallColor] = useState("bg-white");
  const [bed, setBed] = useState("🛏️");
  const [decor, setDecor] = useState([]);

  const addDecor = (item) => {
    setDecor([...decor, item]);
  };

  return (
    <div className="flex flex-col items-center p-6 min-h-screen bg-gray-100">
      <h1 className="text-3xl font-bold mb-4">🎮 Bedroom Decorator Game</h1>
      <div
        className={`w-96 h-64 ${wallColor} rounded-2xl shadow-xl flex items-center justify-center relative`}
      >
        <div className="text-6xl absolute bottom-6">{bed}</div>
        {decor.map((item, index) => (
          <div key={index} className="absolute top-6 right-6 text-4xl">
            {item}
          </div>
        ))}
      </div>

      <div className="mt-6 grid grid-cols-2 gap-4 w-96">
        <div className="p-4 bg-white rounded-xl shadow">
          <h2 className="font-semibold mb-2">Wall Color</h2>
          <div className="flex gap-2">
            <button
              className="w-8 h-8 rounded-full bg-white border"
              onClick={() => setWallColor("bg-white")}
            ></button>
            <button
              className="w-8 h-8 rounded-full bg-blue-300"
              onClick={() => setWallColor("bg-blue-300")}
            ></button>
            <button
              className="w-8 h-8 rounded-full bg-pink-200"
              onClick={() => setWallColor("bg-pink-200")}
            ></button>
            <button
              className="w-8 h-8 rounded-full bg-green-200"
              onClick={() => setWallColor("bg-green-200")}
            ></button>
          </div>
        </div>

        <div className="p-4 bg-white rounded-xl shadow">
          <h2 className="font-semibold mb-2">Bed Style</h2>
          <div className="flex gap-2">
            <button onClick={() => setBed("🛏️")} className="text-2xl">
              🛏️
            </button>
            <button onClick={() => setBed("🛌")} className="text-2xl">
              🛌
            </button>
            <button onClick={() => setBed("🛋️")} className="text-2xl">
              🛋️
            </button>
          </div>
        </div>

        <div className="p-4 bg-white rounded-xl shadow col-span-2">
          <h2 className="font-semibold mb-2">Add Decor</h2>
          <div className="flex gap-2 flex-wrap">
            <button onClick={() => addDecor("🪴")} className="text-2xl">
              🪴 Plant
            </button>
            <button onClick={() => addDecor("🖼️")} className="text-2xl">
              🖼️ Picture
            </button>
            <button onClick={() => addDecor("💡")} className="text-2xl">
              💡 Lamp
            </button>
            <button onClick={() => addDecor("🎸")} className="text-2xl">
              🎸 Guitar
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}