import React from "react";
import { NavLink, useNavigate } from "react-router-dom";
import {
  FaHome,
  FaUserAlt,
  FaStickyNote,
  FaCog,
  FaSignOutAlt,
} from "react-icons/fa";

const SideNav = () => {
  const links = [
    {
      name: "Home",
      icon: <FaHome />,
      link: "/homepage",
    },
    {
      name: "Profile",
      icon: <FaUserAlt />,
      link: "/homepage/profile",
    },
    {
      name: "My Post",
      icon: <FaStickyNote />,
      link: "/homepage/myposts",
    },
    {
      name: "Settings",
      icon: <FaCog />,
      link: "/homepage/settings",
    },
  ];

  return (
    <React.Fragment>
      <div className="col-sm-3 sidenav">
        <ul className="list-group list-group-flush">
          {links.map((item, idx) => (
            <li
              className="list-group-item list-group-item-action list-group-item-dark"
              key={idx}
            >
              <NavLink to={item.link} end={true}>
                {item.icon}
                <span className="ms-3">{item.name}</span>
              </NavLink>
            </li>
          ))}
          <li className="list-group-item list-group-item-action list-group-item-dark">
            <a href="!#" data-bs-toggle="modal" data-bs-target="#exampleModal">
              <FaSignOutAlt className="me-3" /> Logout
            </a>
          </li>
        </ul>
      </div>
      <Modal />
    </React.Fragment>
  );
};

export const Modal = () => {
  const navigate = useNavigate();

  const logout = () => {
    localStorage.clear();
    navigate("/");
  };
  return (
    <div
      className="modal fade"
      id="exampleModal"
      tabIndex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div className="modal-dialog modal-dialog-centered">
        <div className="modal-content modal-dark">
          <div className="modal-header border border-0">
            <h4 className="modal-title">Important !!</h4>
            <div data-bs-dismiss="modal" style={{ cursor: "pointer" }}>
              close
            </div>
          </div>

          <div className="modal-body">You sure want to logout ?</div>

          <div className="modal-footer border border-0">
            <button
              type="button"
              className="btn btn-primary"
              data-bs-dismiss="modal"
              onClick={logout}
            >
              Logout
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SideNav;