import logo from "../logo.png";

import { useSelector, useDispatch } from "react-redux";
import { NavLink } from "react-router-dom";
import { setLogout } from "../redux/features/authSlice";
import { useNavigate } from "react-router-dom";

const Navbar = () => {
  const { user } = useSelector((state) => ({ ...state.auth }));
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const handleLogout = () => {
    dispatch(setLogout());
    navigate("/");
  };

  return (
    <>
      <div
        className="navbar navbar-expand-lg w-100"
        style={{
          backgroundColor: "#000000",
          position: "fixed", // Make the navbar fixed at the top
          top: 0,
          left: 0,
          right: 0,
          zIndex: 1000, // Ensure the navbar is above other elements
        }}
      >
        <div className="container-fluid d-flex align-items-center justify-content-between">
          <div className="d-flex align-items-center">
            <img
              src={logo}
              alt="logo"
              width="75"
              height="75"
              className="img-fluid"
            />
            <p
              style={{
                display: "inline-block",
                fontStyle: "italic",
                fontSize: "14px",
                color: "white",
                margin: "0 0 0 10px",
              }}
            >
              {/* Only Portal of Certified Realtor Lender and Borrowers */}
            </p>
          </div>

          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav ml-auto">
              <li className="nav-item active">
                <NavLink
                  to="/"
                  className="nav-link"
                  style={{
                    color: "#fda417",
                    border: "#fda417",
                    fontSize: "20px",
                    fontWeight: "normal",
                  }}
                >
                  Home
                </NavLink>
              </li>
              <li className="nav-item">
                <NavLink to="/services" className="nav-link" style={{
                    fontSize: "20px",
                    fontWeight: "normal",
                  }}>
                  Services
                </NavLink>
              </li>
              <li className="nav-item">
                <NavLink
                  to="/searchmyproperties"
                  className="nav-link"
                  style={{
                    color: "#fda417",
                    border: "#fda417",
                    fontSize: "20px",
                    fontWeight: "normal",
                  }}
                >
                  Search Database
                </NavLink>
              </li>
              <li className="nav-item">
                <NavLink to="/about" className="nav-link"   style={{
                    fontSize: "20px",
                    fontWeight: "normal",
                  }}>
                  About
                </NavLink>
              </li>

              <li className="nav-item">
                <NavLink
                  to="/searchproperties"
                  className="nav-link"
                  style={{
                    color: "#fda417",
                    border: "#fda417",
                    fontSize: "20px",
                    fontWeight: "normal",
                  }}
                >
                  Search properties
                </NavLink>
              </li>

              <li className="nav-item">
                <NavLink to="/contact" className="nav-link" style={{
                    fontSize: "20px",
                    fontWeight: "normal",
                  }}>
                  Contact
                </NavLink>
              </li>

              {/* <div className="btn_main">
                            <div className="started_text active">
                            <NavLink to="/addproperty" className="nav-link">Add Property</NavLink>
                            </div>
                           
                          </div> */}
            </ul>

            {user?.result?._id ? (
              <NavLink
                to="/dashboard"
                style={{
                  fontWeight: "bold",
                }}
              >
                Dashboard
              </NavLink>
            ) : (
              <NavLink
                to="/register"
                className="nav-link"
                style={{
                  fontWeight: "bold",
                }}
              >
                Register
              </NavLink>
            )}

            {user?.result?._id ? (
              <NavLink to="/login">
                <p
                  className="header-text"
                  onClick={handleLogout}
                  style={{
                    fontWeight: "bold",
                  }}
                >
                  Logout
                </p>
              </NavLink>
            ) : (
              <NavLink
                to="/login"
                className="nav-link"
                style={{
                  fontWeight: "bold",
                }}
              >
                Login
              </NavLink>
            )}
          </div>
        </div>
      </div>
    </>
  );
};

export default Navbar;
