import React from 'react';
import { Link, useNavigate, useLocation } from 'react-router-dom';

const Sidebar = () => {
    const navigate = useNavigate();
    const location = useLocation();
    
    const handleLogout = () => {
        localStorage.clear();
        navigate('/login');
    };

    const isActive = (path) => location.pathname === path ? 'bg-slate-700 text-emerald-400' : 'text-slate-300 hover:bg-slate-700';

    return (
        <aside className="w-64 bg-slate-800 text-white min-h-screen p-6 flex flex-col justify-between shadow-xl">
            <div>
                <h2 className="text-xl font-bold tracking-wider text-emerald-400 mb-8 border-b border-slate-700 pb-4">SmartPark Ltd</h2>
                <nav className="space-y-2">
                    <Link to="/dashboard" className={`block p-3 rounded transition font-medium ${isActive('/dashboard')}`}>📊 Overview</Link>
                    <Link to="/departments" className={`block p-3 rounded transition font-medium ${isActive('/departments')}`}>🏢 Departments</Link>
                    <Link to="/employees" className={`block p-3 rounded transition font-medium ${isActive('/employees')}`}>👥 HR Employees</Link>
                    <Link to="/payroll" className={`block p-3 rounded transition font-medium ${isActive('/payroll')}`}>💵 Run Payroll</Link>
                    <Link to="/salary" className={`block p-3 rounded transition font-medium ${isActive('/salary')}`}>💰 Salary</Link>
                    <Link to="/reports" className={`block p-3 rounded transition font-medium ${isActive('/reports')}`}>📈 Monthly Reports</Link>
                </nav>
            </div>
            <button onClick={handleLogout} className="w-full bg-red-600 p-3 rounded-lg hover:bg-red-700 transition font-semibold tracking-wide shadow-md">
                Logout
            </button>
        </aside>
    );
};

export default Sidebar;