'use client'

import SaveIcon from '@mui/icons-material/Save';
import {Box, Button, Typography} from "@mui/material";
import DownloadIcon from '@mui/icons-material/Download';
import {toast} from "react-toastify";

function AskForKeep({onSaveFilter}) {

    const handleDismiss = () => {
        toast.dismiss({containerId: "filtering"});
    };

    return (
        <Box sx={{width: "100%"}}>
            <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1}}>
                <Typography color="#155175" variant="subtitle1" sx={{fontWeight: "500"}}>
                    ذخیره سازی اطلاعات
                </Typography>
                <SaveIcon sx={{color: "#155175"}}/>
            </Box>
            <Box sx={{display: "flex", flexDirection: "column"}}>
                <Typography variant="caption">
                    آیا مایل به ذخیره فیلتر های اعمال شده برای دفعات بعد هستید؟
                </Typography>
            </Box>
            <Box sx={{display: "flex", gap: 1, mt: 1}}>
                <Button variant="contained" onClick={handleDismiss} sx={{
                    backgroundColor: "#792626",
                    ':hover': {backgroundColor: "#792626"},
                    boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
                }}>رد
                    کردن</Button>
                <Button variant="contained" component="label" endIcon={<DownloadIcon/>}
                        onClick={onSaveFilter}
                        sx={{
                            backgroundColor: "#155175",
                            ':hover': {backgroundColor: "#155175"},
                            boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
                        }}>ذخیره
                    فیلتر</Button>
            </Box>
        </Box>
    );
}

export default AskForKeep;