export default function Layout({ page, setPage, children }) {
    return (
        <div className="wc-settings">
            <div className="wc-navbar">
                <h1 className="wc-title">Settings</h1>

                <nav className="wc-nav">
                    <button
                        className={page === "settings" ? "active" : ""}
                        onClick={() => setPage("settings")}
                    >
                        Settings
                    </button>
                    <button
                        className={page === "products" ? "active" : ""}
                        onClick={() => setPage("products")}
                    >
                        Products
                    </button>
                    <button
                        className={page === "orders" ? "active" : ""}
                        onClick={() => setPage("orders")}
                    >
                        Orders
                    </button>
                </nav>
            </div>
            

            <div className="wc-panel">{children}</div>
        </div>
    );
}