text: import React, { useState } from "react";
  import { navigate } from "hookrouter";
  import axios from "axios";
  import { Loading } from "../Common/Loader";
  import { toast } from "react-toastify";
  import { LOGIN_URL } from "../../constants";
  
  export default function Login({ onToggle }) {
    const initForm = {
      email: "",
      password: "",
    };
    const [form, setForm] = useState(initForm);
    const [loading, setLoading] = useState(false);
  
    const handleChange = (e) => {
      const { value, name } = e.target;
      const FieldValue = { ...form };
      FieldValue[name] = value;
      setForm(FieldValue);
    };
    const handleSubmit = (e) => {
      e.preventDefault();
      setLoading(true);
      axios
        .post(LOGIN_URL, { ...form })
        .then((resp) => {
          setForm(initForm);
          toast.success(JSON.stringify(resp.data.message));
          localStorage.setItem("access_token", resp.data.data.access_token);
          navigate("/home");
          setLoading(false);
          window.location.reload();
        })
        .catch(({ response }) => {
          if (response) {
            toast.error(JSON.stringify(response.data.detail));
          }
          setLoading(false);
        });
    };
  
    return (
      <div>
        {loading ? (
          <Loading />
        ) : (
          <div className="flex items-center justify-center py-5 px-4 sm:px-6 lg:px-8">
            <div className="max-w-md w-full">
              <form
                onSubmit={handleSubmit}
                className="bg-white shadow rounded px-8 pt-6 pb-8 my-5 lg:my-20"
              >
                <div className="mb-4">
                  <label
                    className="block text-gray-700 text-sm font-bold mb-2"
                    htmlFor="email"
                  >
                    Email
                  </label>
                  <input
                    aria-label="user name"
                    name="email"
                    value={form.email}
                    type="email"
                    onChange={handleChange}
                    className="appearance-none border rounded w-full py-2 px-3 text-gray-700 bg-indigo-100 leading-tight focus:outline-none focus:shadow-outline"
                    placeholder="Enter your email"
                  />
                </div>
                <div className="mb-2">
                  <label
                    className="block text-gray-700 text-sm font-bold mb-2"
                    htmlFor="password"
                  >
                    Password
                  </label>
                  <input
                    aria-label="Password"
                    name="password"
                    type="password"
                    value={form.password}
                    onChange={handleChange}
                    className="appearance-none border rounded w-full py-2 px-3 text-gray-700 bg-indigo-100 leading-tight focus:outline-none focus:shadow-outline"
                    placeholder="********"
                  />
                </div>
  
                <div className=" flex flex-col sm:flex-row items-start sm:items-center justify-between mt-4">
                  <button
                    type="submit"
                    className="flex w-full sm:w-1/3 items-center bg-indigo-500 hover:bg-indigo-800 text-white font-bold py-2 px-4 sm:px-3 rounded focus:outline-none focus:shadow-outline"
                  >
                    <svg
                      className="h-5 w-5 text-indigo-700 transition ease-in-out duration-150 mr-1"
                      fill="currentColor"
                      viewBox="0 0 20 20"
                    >
                      <path
                        fillRule="evenodd"
                        d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
                        clipRule="evenodd"
                      />
                    </svg>
                    Login
                  </button>
                  <div className="flex-col font-semibold text-sm mx-2 pt-2 text-indigo-800">
                    <div className="flex gap-x-1 items-center">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        fill="currentColor"
                        className="bi bi-exclamation-triangle-fill"
                        viewBox="0 0 16 16"
                      >
                        <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
                      </svg>
                      <p>Don't have an account?</p>
                    </div>
                    <button
                      className="font-semibold"
                      onClick={() => {
                        onToggle();
                      }}
                    >
                      <div className="flex items-center gap-x-1">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="16"
                          fill="currentColor"
                          className="bi bi-link-45deg"
                          viewBox="0 0 16 16"
                        >
                          <path d="M4.715 6.542L3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.001 1.001 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
                          <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 0 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 0 0-4.243-4.243L6.586 4.672z" />
                        </svg>
                        <div>Register here</div>
                      </div>
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        )}
      </div>
    );
  }
  