// 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";
import "../navbar.css";

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

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

  return (
    <nav
      className="navbar navbar-expand-lg w-100"
      style={{
        backgroundColor: "#000000",
        position: "fixed",
        top: 0,
        left: 0,
        right: 0,
        zIndex: 1000,
      }}
    >
      <div className="container-fluid">
        <div className="d-flex align-items-center">
          {/* Logo Section */}
          {/* <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>

        {/* Toggler Button for Small Screens */}
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
          style={{ borderColor: "#fda417" }}
        >
          <span className="navbar-toggler-icon"></span>
        </button>

        <div
          className="collapse navbar-collapse justify-content-end"
          id="navbarNav"
        >
          <ul className="navbar-nav">
            <li className="nav-item">
              <NavLink
                to="/"
                className="nav-link"
                style={{
                  color: "#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",
                  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",
                  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>
          </ul>

          <div className="navbar-right d-flex">
            {user?.result?._id ? (
              <>
                <NavLink
                  to="/dashboard"
                  style={{
                    fontWeight: "bold",
                    color: "#fda417",
                    marginRight: "20px",
                  }}
                >
                  Dashboard
                </NavLink>
                <span
                  onClick={handleLogout}
                  style={{
                    fontWeight: "bold",
                    color: "#fda417",
                    cursor: "pointer",
                  }}
                  className="nav-link logout-link"
                >
                  Logout
                </span>
              </>
            ) : (
              <>
                <NavLink
                  to="/register"
                  className="nav-link"
                  style={{
                    fontWeight: "bold",
                    color: "#fda417",
                    marginRight: "20px",
                  }}
                >
                  Register
                </NavLink>
                <NavLink
                  to="/login"
                  className="nav-link"
                  style={{
                    fontWeight: "bold",
                    color: "#fda417",
                  }}
                >
                  Login
                </NavLink>
              </>
            )}
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;
