"use client";
import { Button, IconButton, useMediaQuery } from "@mui/material";
import { useTheme } from "@emotion/react";
import { useState } from "react";
import AddRoadIcon from "@mui/icons-material/AddRoad";
import GashtCreate from "./GashtCreate";

const ObservedGashtCreate = ({ 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}>
                    <AddRoadIcon sx={{ fontSize: "25px" }} />
                </IconButton>
            ) : (
                <Button
                    size={"small"}
                    variant="contained"
                    color="primary"
                    startIcon={<AddRoadIcon />}
                    onClick={handleOpen}
                >
                    ثبت فعالیت برای موارد مشاهده شده در گشت راهداری
                </Button>
            )}
            {open && <GashtCreate open={open} setOpen={setOpen} mutate={mutate} />}
        </>
    );
};
export default ObservedGashtCreate;