import { useState } from "react";

export default function RandomColor() {
  const [typeofColor, setTypeOfColor] = useState("hex");
  const [color, setColor] = useState("#0000ff");

  function createRandomHexColor() {
    const hex = [0,1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
    let hexColor = "#";
    for (let i = 0; i < 6; i++) {
      hexColor = hexColor + hex[Math.floor(Math.random() * hex.length)];
    }
    
    setColor(hexColor);
    console.log(color);
  }

  function createRandomRgbColor() {}

  return (
    <div
      className={`w-[700px] h-[700px] bg-[${color}] flex justify-center items-start gap-4`}
    >
      <button  => setTypeOfColor("hex")} className="bg-white">
        Create Hex Color
      </button>
      <button  => setTypeOfColor("rgb")} className="bg-white">
        Create RGB Color
      </button>
      <button
         
          typeofColor === "hex" ? createRandomHexColor : createRandomRgbColor
        }
        className="bg-white"
      >
        Generate Random Color
      </button>
    </div>
  );
}