import React from "react";
import { NavLink, useNavigate } from "react-router-dom";
import { logoutUser } from "../api/authApi";

const Sidebar = ({ setUser }) => {
  const navigate = useNavigate();

  const linkClass = ({ isActive }) =>
    `block rounded-md px-4 py-3 text-sm font-semibold ${
      isActive ? "bg-secondary text-primary" : "text-secondary"
    }`;

  const handleLogout = async () => {
    await logoutUser();
    setUser(null);
    navigate("/login");
  };

  return (
    <aside className="no-print w-full bg-primary p-4 text-secondary md:min-h-screen md:w-64">
      <h1 className="mb-6 text-xl font-bold">EPMS</h1>
      <nav className="grid gap-2">
        <NavLink to="/" className={linkClass}>Dashboard</NavLink>
        <NavLink to="/employees" className={linkClass}>Employees</NavLink>
        <NavLink to="/payrolls" className={linkClass}>Payroll</NavLink>
        <NavLink to="/reports" className={linkClass}>Reports</NavLink>
        <button
          onClick={handleLogout}
          className="mt-4 rounded-md border border-secondary px-4 py-3 text-left text-sm font-semibold text-secondary"
        >
          Logout
        </button>
      </nav>
    </aside>
  );
};

export default Sidebar;
