import { DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, Dialog as MuiDialog, DialogProps as MuiDialogProps } from "@mui/material";
import { useState } from "react";
import { Button } from "../Button/Button";

export interface DialogProps extends MuiDialogProps {
    title?: string,
    content?: string,
    label1?: string,
    label2?: string,
}

export const ConfirmDialog = ({ title, content, label1, label2, maxWidth, fullWidth, open, ...rest }: DialogProps) => {
    const [isOpen, setIsOpen] = useState(false);

    const handleClickOpen = () => {
        setIsOpen(true);

    };

    const handleClose = () => {
        setIsOpen(false);
    };

    return (
        <div>
            <Button label="Open alert dialog" variant="outlined" onClick={handleClickOpen}>
            </Button>
            <MuiDialog fullWidth={fullWidth}
                maxWidth={maxWidth} open={isOpen} {...rest}>
                <DialogTitle id="alert-dialog-title">
                    {title}
                </DialogTitle>
                <Divider />
                <DialogContent>
                    <DialogContentText id="alert-dialog-description">
                        {content}
                    </DialogContentText>
                </DialogContent>
                <DialogActions>
                    <Button size="small" label={label1 ? label1 : 'No'} variant="outlined" color="error" onClick={handleClose} />
                    <Button size="small" label={label2 ? label2 : 'Yes'} variant="outlined" onClick={handleClose} autoFocus />
                </DialogActions>
            </MuiDialog>
        </div>
    )

}