import React, { useState } from 'react';
import { 
  Box, 
  Button, 
  Dialog, 
  DialogActions, 
  DialogContent, 
  DialogTitle, 
  IconButton, 
  Typography 
} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';

export default function MUIModalComponent() {
  const [open, setOpen] = useState(false);

  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <Box sx={{ 
      minHeight: '100vh', 
      bgcolor: 'grey.50', 
      display: 'flex', 
      alignItems: 'center', 
      justifyContent: 'center', 
      p: 4 
    }}>
      {/* Trigger Button */}
      <Button 
        variant="contained" 
        color="primary" 
        onClick={handleOpen}
        sx={{ 
          py: 1.5, 
          px: 3, 
          fontWeight: 500,
          boxShadow: 2
        }}
      >
        Open Modal madan
      </Button>

      {/* Modal */}
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-title"
        maxWidth="sm"
        fullWidth
        sx={{
          '& .MuiDialog-paper': {
            borderRadius: 1,
            m: { xs: 2, sm: 4 },
            boxShadow: 24
          }
        }}
      >
        {/* Modal Header */}
        <DialogTitle id="modal-title" sx={{ 
          display: 'flex', 
          justifyContent: 'space-between', 
          alignItems: 'center',
          pb: 2
        }}>
          <Typography variant="h6" component="h2" sx={{ fontWeight: 500, color: 'text.primary' }}>
            Modal Title
          </Typography>
          <IconButton
            aria-label="close"
            onClick={handleClose}
            edge="end"
            size="large"
            sx={{
              color: 'grey.500',
              '&:hover': {
                color: 'grey.700',
                bgcolor: 'grey.100'
              }
            }}
          >
            <CloseIcon />
          </IconButton>
        </DialogTitle>

        {/* Modal Body */}
        <DialogContent dividers>
          <Typography variant="body1" color="text.secondary">
            This is the modal content area where you can place any information or components. 
            You can add forms, text, images, or any other React components here. The modal 
            is fully responsive and accessible.
          </Typography>
        </DialogContent>

        {/* Modal Actions */}
        <DialogActions sx={{ px: 3, py: 2 }}>
          <Button 
            onClick={handleClose} 
            color="primary"
            variant="text"
            sx={{ fontWeight: 500 }}
          >
            Cancel
          </Button>
          <Button 
            onClick={handleClose} 
            color="primary" 
            variant="contained"
            sx={{ fontWeight: 500, px: 3 }}
          >
            Confirm
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
}