import React, { useEffect, useState } from "react";
import { Outlet } from "react-router";
import Navbar from "../components/Navbar";
import Sidebar from "../components/Sidebar";

const MainLayout = () => {
  return (
    <div className="bg-[#F2F2F2] overflow-x-hidden font-iran dark:bg-[#001F3F] min-h-screen max-w-screen w-full" dir="rtl">
      <Navbar />

      <div className="flex xl:pt-0 pt-22 xl:pr-5 overflow-x-hidden">
        <Sidebar />

        <div className="xl:w-10/12 w-full md:px-5 px-2">
          <div className="bg-white dark:bg-[#16325B] shadow dark:text-white min-h-[500px] flex justify-center rounded-4xl px-5 py-5">
            <Outlet />
          </div>
        </div>
      </div>
    </div>
  );
};

export default MainLayout;
