import React from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import { Trans } from '@lingui/macro';
import styled from 'styled-components';

//  Correct styled-component syntax
const LocalDialog = styled(Dialog)`
  .MuiPaper-root {
    min-width: 22rem;
  }
`;

//  Props interface
interface InfoDialogProps {
  title: React.ReactNode;
  text: React.ReactNode;
  open: boolean;
  handleClose: () => void;
}

//  Typed component
export default function InfoDialog({ title, text, open, handleClose }: InfoDialogProps) {
  return (
    <LocalDialog open={open} onClose={handleClose}>
      <DialogTitle>{title}</DialogTitle>
      <DialogContent>
        <DialogContentText>{text}</DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose} autoFocus>
          <Trans>Close</Trans>
        </Button>
      </DialogActions>
    </LocalDialog>
  );
}