// react
import React, { ReactNode, useState } from 'react';
// third-party
import classNames from 'classnames';
// application
import Sidebar from './Sidebar';
import Header from './Header';

interface Props {
  children: ReactNode;
}

function AdminLayout({ children }: Props) {
  const [sidebarOpen, setSidebarOpen] = useState(true);

  const toggleSidebar = () => {
    setSidebarOpen(!sidebarOpen);
  };

  return (
    <div className="admin-layout">
      <Sidebar isOpen={sidebarOpen} />
      <div className={classNames('admin-layout__content', {
        'admin-layout__content--sidebar-open': sidebarOpen,
      })}>
        <Header onToggleSidebar={toggleSidebar} />
        <main className="admin-layout__main">
          {children}
        </main>
      </div>
    </div>
  );
}

export default AdminLayout;