import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  TextField,
} from "@mui/material";

interface StatusChangeDialogProps {
  open: boolean;
  newStatus: string;
  reason: string;
  setReason: React.Dispatch<React.SetStateAction<string>>;
  handleClose: () => void;
  handleSave: () => void;
}

const StatusChangeDialog = ({
  open,
  newStatus,
  reason,
  setReason,
  handleClose,
  handleSave,
}: StatusChangeDialogProps) => {
  return (
    <Dialog open={open} onClose={handleClose}>
      <DialogTitle>Change Status</DialogTitle>
      <DialogContent>
        You want to change the status to <b>{newStatus}</b>. Please provide a
        reason for the change.
        <TextField
          label="Reason for change"
          variant="outlined"
          fullWidth
          multiline
          rows={4}
          value={reason}
          onChange={(e) => setReason(e.target.value)}
          sx={{ mt: 2 }}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose}>Cancel</Button>
        <Button variant="contained" onClick={handleSave} disabled={!reason}>
          Save
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default StatusChangeDialog;