import { NavLink } from "react-router-dom";
import { useTheme } from "../context/ThemeContext";

const navItems = [
  { to: "/", label: "Fooldal" },
  { to: "/termekek", label: "Termekek" },
  { to: "/kapcsolat", label: "Kapcsolat" }
];

function Layout({ children }) {
  const { theme, toggleTheme } = useTheme();

  return (
    <div className={`app-shell ${theme}`}>
      <header className="topbar">
        <h1>React Frontend Minta</h1>
        <nav>
          {navItems.map((item) => (
            <NavLink
              key={item.to}
              to={item.to}
              className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}
            >
              {item.label}
            </NavLink>
          ))}
        </nav>
        <button className="theme-button" onClick={toggleTheme}>
          Tema: {theme === "light" ? "Vilagos" : "Sotet"}
        </button>
      </header>
      <main className="page-content">{children}</main>
    </div>
  );
}

export default Layout;