import axios from "axios";
import { useState } from "react";
import { useNavigate } from "react-router-dom";

function AdminLogin() {

  const BASE_URL = import.meta.env.VITE_REACT_APP_SECRET; 

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const { data } = await axios.post(`${BASE_URL}/admin/login`, {
        username,
        password,
      });

      localStorage.setItem("token", data.token);
      navigate("/AdminPLogin/dashboard");
    } catch (error) {
      alert("Invalid login credentials", error);
    }
  };

  return (
    <>
      <section
        className="d-flex justify-content-center align-items-center col-12"
        style={{
          minHeight: "100vh",
          backgroundColor: "#FFFFFF",
          width: "100%",
          paddingLeft: "500px",
        }}
      >
        <div className="col-md-6 col-lg-4">
          <div className="container-fluid px-0">
            <div className="row gy-4 align-items-center justify-content-center">
              <div className="col-12 text-center">
                <input
                  autoComplete="off"
                  type="text"
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                />
                <br /> <br />

                <input
                  autoComplete="off"
                  type="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                />

                <div className="mb-3">
                  <button onClick={handleSubmit} className="btn btn-dark w-70">
                    Login
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export default AdminLogin;
