import { Box, Button, Modal, Typography } from "@mui/material";

type Props = {
	open: boolean;
	setLogoutModal: Function;
	handlelogout: any;
};

const style = {
	position: "absolute",
	top: "50%",
	left: "50%",
	transform: "translate(-50%, -50%)",
	width: 330,
	bgcolor: "background.paper",
	borderRadius: 1.5,
	boxShadow: 24,
	p: 3,
};

const btnStyle = { py: 1, px: 5, width: "50%", textTransform: "capitalize" };

export default function LogoutModal({
	open,
	setLogoutModal,
	handlelogout,
}: Props) {
	return (
		<Modal
			open={open}
			aria-labelledby="modal-modal-title"
			aria-describedby="modal-modal-description"
		>
			<Box sx={style}>
				<Typography
					id="modal-modal-title"
					variant="h6"
					component="h2"
					align="center"
				>
					Logout
				</Typography>
				<Typography
					id="modal-modal-description"
					sx={{ mt: 2 }}
					align="center"
				>
					Are you sure you want to Logout?
				</Typography>
				<Box
					sx={{
						display: "flex",
						justifyContent: "space-between",
						mt: 4,
						gap: 2,
					}}
				>
					<Button
						variant="contained"
						color="error"
						type="button"
						sx={btnStyle}
						onClick={() => setLogoutModal(false)}
					>
						Cancel
					</Button>
					<Button
						variant="contained"
						type="button"
						color="primary"
						sx={btnStyle}
						onClick={() => handlelogout()}
					>
						Logout
					</Button>
				</Box>
			</Box>
		</Modal>
	);
}
