import { Dialog, DialogContent, DialogTitle, IconButton, Tooltip, Typography, Card, CardContent } from "@mui/material";
import { useState } from "react";
import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
import CloseIcon from "@mui/icons-material/Close";

const DescriptionForm = ({ description, title, icon: IconComponent = RemoveRedEyeIcon }) => {
    const [openOfficerDescriptionDialog, setOpenOfficerDescriptionDialog] = useState(false);

    return (
        <>
            <Tooltip title={title}>
                <IconButton color="primary" onClick={() => setOpenOfficerDescriptionDialog(true)}>
                    <IconComponent />
                </IconButton>
            </Tooltip>
            <Dialog
                open={openOfficerDescriptionDialog}
                onClose={() => setOpenOfficerDescriptionDialog(false)}
                PaperProps={{
                    sx: {
                        transition: "all .3s",
                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
                        borderRadius: 2,
                        padding: 1,
                    },
                }}
                maxWidth="sm"
                fullWidth
                dir="rtl"
            >
                <DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
                    <Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
                        {title}
                    </Typography>
                    <IconButton onClick={() => setOpenOfficerDescriptionDialog(false)} size="small">
                        <CloseIcon />
                    </IconButton>
                </DialogTitle>
                <DialogContent>
                    <Card elevation={0}>
                        <CardContent>
                            <Typography variant="body2">{description || "هیچ توضیحی موجود نیست"} </Typography>
                        </CardContent>
                    </Card>
                </DialogContent>
            </Dialog>
        </>
    );
};
export default DescriptionForm;