import * as React from "react";
import Box from "@mui/material/Box";
import Drawer from "@mui/material/Drawer";
import Button from "@mui/material/Button";
import { SxProps, Theme, useMediaQuery, useTheme } from "@mui/material";

interface Props {
  outerContainerSx?: SxProps<Theme>;
  children?: React.ReactNode;
  isOpenDrawer: string;
  drawerNewFieldHC: (str: string) => void;
}

export default function DrawerNewField({
  outerContainerSx: sx,
  children,
  isOpenDrawer: isOpen,
  drawerNewFieldHC,
}: Props) {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  return (
    <>
      <Drawer
        anchor="right"
        open={Boolean(isOpen)}
        onClose={() => drawerNewFieldHC("")}
      >
        <Box sx={{ width: isMobile ? 320 : 450 }} role="presentation">
          {children}
        </Box>
      </Drawer>
    </>
  );
}