import { Link, useNavigate } from "react-router-dom";
import api from "../services/api";

const menu = [
  { to: "/cars", label: "Car" },
  { to: "/services", label: "Services" },
  { to: "/service-records", label: "ServiceRecord" },
  { to: "/payments", label: "Payment" },
  { to: "/reports", label: "Reports" },
];

function Layout({ children }) {
  const navigate = useNavigate();

  const logout = async () => {
    await api.post("/auth/logout");
    navigate("/login");
  };

  return (
    <div className="min-h-screen bg-slate-100">
      <header className="bg-slate-900 text-white shadow-lg">
        <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between px-4 py-4">
          <h1 className="text-xl font-bold text-cyan-300">CRPMS - SmartPark</h1>
          <nav className="flex flex-wrap gap-2">
            {menu.map((item) => (
              <Link
                key={item.to}
                to={item.to}
                className="rounded-md bg-slate-700 px-3 py-2 text-sm hover:bg-cyan-700"
              >
                {item.label}
              </Link>
            ))}
            <button
              type="button"
              onClick={logout}
              className="rounded-md bg-red-600 px-3 py-2 text-sm hover:bg-red-700"
            >
              Logout
            </button>
          </nav>
        </div>
      </header>
      <main className="mx-auto max-w-7xl px-4 py-6">{children}</main>
    </div>
  );
}

export default Layout;
