import { Outlet, Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import LocaleSwitch from "../components/LocaleSwitch";
import { useAuth } from "../contexts/AuthContext";

export default function MainLayout() {
  const { t } = useTranslation();
  const { isAuthenticated, logout } = useAuth();
  return (
    <div className="page">
      <header className="main-header">
        <nav className="main-nav">
          <Link to="/" className="nav-brand">
            {t("nav.home")}
          </Link>
          <Link to="/book" className="nav-link">
            {t("nav.book")}
          </Link>
          <Link to="/pay" className="nav-link">
            {t("nav.pay")}
          </Link>
          <Link to="/profile" className="nav-link">
            {t("nav.profile")}
          </Link>
          <Link to="/bookings" className="nav-link">
            {t("nav.bookings")}
          </Link>
          {isAuthenticated ? (
            <button type="button" className="nav-link nav-logout" onClick={logout}>
              {t("nav.logout")}
            </button>
          ) : (
            <Link to="/login" className="nav-link">
              {t("nav.login")}
            </Link>
          )}
        </nav>
        <LocaleSwitch />
      </header>
      <main>
        <Outlet />
      </main>
    </div>
  );
}