import { useState } from 'react';
import './App.css';
import { Parent } from './children-render/parent';
import { ParentFixed } from './children-render-fixed/parent-fixed';
import { FamilyContextProvider } from './children-render-fixed/family-context';

const App = () => {
  const [version, setVersion] = useState<'normal' | 'fixed'>('normal');

  return (
    <div className="content">
      <button
        className="version__toggle"
        onClick={() => setVersion(version === 'normal' ? 'fixed' : 'normal')}
      >
        Go to {version === 'normal' ? 'fixed' : 'normal'}
      </button>
      {version === 'normal' ? (
        <Parent />
      ) : (
        <FamilyContextProvider>
          <ParentFixed />
        </FamilyContextProvider>
      )}
    </div>
  );
};

export default App;