import { useState } from "react";
import "../../components/Buttons/Button";
function LoginAssets() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Email: ${email}, Password: ${password}`);
  };

  return (
    <div className="flex justify-center items-center min-h-screen bg-[#e0b400]">
      <div className="bg-white shadow-lg rounded-lg flex p-10 max-w-3xl w-full">
        {/* Logo */}
        <div className="flex justify-center items-center w-1/2">
          <img
            src="/logo.png" // 👈 coloca aquí tu logo (ponlo en public/logo.png)
            alt="Logo"
            className="max-h-40"
          />
        </div>

        {/* Formulario */}
        <div className="flex flex-col justify-center w-1/2">
          <form onSubmit={handleSubmit} className="space-y-4">
            <button className="gray">
              <input
                type="text"
                placeholder="EMAIL/USER"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="w-full px-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-[#720019]"
              />
            </button>
            <input
              type="password"
              placeholder="PASSWORD"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
            <div className="flex gap-3">
              <button
                type="submit"
                className="bg-[#720019] text-white font-bold px-6 py-2 rounded-full hover:bg-[#5a0014] transition"
              >
                LOG IN
              </button>
              <button
                type="button"
                className="bg-[#720019] text-white font-bold px-6 py-2 rounded-full hover:bg-[#5a0014] transition"
              >
                RECOVER PASSWORD
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

export default LoginAssets;
