import React, { useState } from 'react';
import { Outlet, useOutletContext } from 'react-router';

const App: React.FC & {
  RouteGuard?: React.FC<{ children: (isLoggedIn: boolean) => React.ReactNode }>;
} = () => {
  const [isLoggedIn, setLoggedIn] = useState(false);

  return (
    <div style={{ padding: '20px' }}>
      <button onClick={() => setLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? 'Logout' : 'Login'}
      </button>

      <hr />

      <Outlet context={{ isLoggedIn }} />
    </div>
  );
};

App.RouteGuard = ({ children }) => {
  const { isLoggedIn } = useOutletContext<{ isLoggedIn: boolean }>();
  return <>{children(isLoggedIn)}</>;
};

export default App;

