"use client";
import { AddCircle } from "@mui/icons-material";
import {
  Button,
  Dialog,
  IconButton,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import CreateUserForm from "./Form";
import { useState } from "react";

const CreateUser = ({ mutate }) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
  const [open, setOpen] = useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  return (
    <>
      {isMobile ? (
        <IconButton
          aria-label="کاربر جدید"
          color="primary"
          onClick={handleOpen}
        >
          <AddCircle sx={{ fontSize: "25px" }} />
        </IconButton>
      ) : (
        <Button
          size={"small"}
          variant="contained"
          color="primary"
          startIcon={<AddCircle />}
          onClick={handleOpen}
        >
          کاربر جدید
        </Button>
      )}
      <Dialog maxWidth="sm" fullWidth={true} open={open}>
        <CreateUserForm open={open} setOpen={setOpen} mutate={mutate} />
      </Dialog>
    </>
  );
};
export default CreateUser;
