import { Button, IconButton, Tooltip, useMediaQuery } from "@mui/material";
import { useState } from "react";
import ViolationsDialog from "./Dialog";
import theme from "@/core/utils/theme";
import RemoveRoadIcon from "@mui/icons-material/RemoveRoad";

const OperatorViolations = ({ mutate }) => {
    const [open, setOpen] = useState(false);
    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
    return (
        <>
            <Tooltip title="تخلفات">
                {isMobile ? (
                    <IconButton aria-label="تخلفات" color="primary" onClick={() => setOpen(true)}>
                        <RemoveRoadIcon sx={{ fontSize: "25px" }} />
                    </IconButton>
                ) : (
                    <Button
                        size={"small"}
                        variant="contained"
                        color="primary"
                        startIcon={<RemoveRoadIcon />}
                        onClick={() => setOpen(true)}
                    >
                        تخلفات
                    </Button>
                )}
            </Tooltip>
            <ViolationsDialog open={open} setOpen={setOpen} mutate={mutate} />
        </>
    );
};
export default OperatorViolations;