"use client";
import "@/assets/scss/fontiran.scss";
import "@/assets/scss/global.scss";
import theme from "@/core/utils/theme";
import { CssBaseline, GlobalStyles, ThemeProvider } from "@mui/material";

import { ToastContainer } from "react-toastify";

const Template = ({ children }) => {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyles
        styles={{
          "*": {
            scrollbarWidth: "thin",
            scrollbarColor: `${theme.palette.primary.dark} transparent`,
          },
          "*&::-webkit-scrollbar": {
            width: "4px",
          },
          "*&::-webkit-scrollbar-track": {
            boxShadow: "inset 0 0 5px #fff",
            borderRadius: "4px",
          },
          "*&::-webkit-scrollbar-thumb": {
            background: `${theme.palette.primary.dark}`,
            borderRadius: "4px",
          },
        }}
      />
      <CssBaseline />
      {children}
      <ToastContainer rtl containerId="filtering" closeButton={false} />
      <ToastContainer rtl containerId="request_data" />
      <ToastContainer rtl containerId="socket_connection" position="top-left" />
    </ThemeProvider>
  );
};

export default Template;
