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

const Layout = ({ children }) => {
  const navigate = useNavigate();
  const location = useLocation();

  const handleLogout = () => {
    localStorage.removeItem('token');
    navigate('/login');
  };

  const navLinks = [
    { name: 'Dashboard', path: '/' },
    { name: 'Employee', path: '/employee' },
    { name: 'Department', path: '/department' },
    { name: 'Salary', path: '/salary' },
    { name: 'Reports', path: '/reports' },
  ];

  return (
    <div className="flex flex-col min-h-screen bg-gray-50">
      {/* HEADER */}
      <header className="bg-blue-800 text-white p-4 shadow-md flex justify-between items-center">
        <h1 className="text-xl font-bold">SmartPark EPMS</h1>
        <span className="text-sm">employee Manager P</span>
      </header>

      <div className="flex flex-1">
        {/* SIDEBAR */}
        <aside className="w-64 bg-slate-900 text-white p-6 hidden md:flex flex-col">
          <nav className="space-y-4 flex-1">
            {navLinks.map((link) => (
              <a 
                key={link.name} 
                href={link.path} 
                className={`block py-2 px-4 rounded transition ${
                  location.pathname === link.path ? 'bg-blue-600' : 'hover:bg-slate-700'
                }`}
              >
                {link.name}
              </a>
            ))}
          </nav>
          
          <button 
            onClick={handleLogout} 
            className="mt-auto w-full bg-red-600 hover:bg-red-700 text-white py-2 rounded transition"
          >
            Logout
          </button>
        </aside>

        {/* MAIN CONTENT */}
        <main className="flex-1 p-8 overflow-y-auto">
          {children}
        </main>
      </div>

      {/* FOOTER */}
      <footer className="bg-slate-800 text-gray-400 text-center p-4 text-xs">
        © 2026 SmartPark Payroll Management System | All Rights Reserved.
      </footer>
    </div>
  );
};

export default Layout;