import React from 'react';
import { Alert, AlertTitle, Button, Box, Collapse } from '@mui/material';
import { Close } from '@mui/icons-material';
import styled from '@emotion/styled';

const ErrorContainer = styled(Box)(({ theme }) => ({
  marginBottom: theme.spacing(2),
  width: '100%',
}));

const ErrorMessage = ({ 
  error, 
  onRetry, 
  onClose, 
  severity = 'error',
  title = 'Error',
  retryText = 'Try Again',
  closable = true
}) => {
  const [open, setOpen] = React.useState(true);

  const handleClose = () => {
    setOpen(false);
    if (onClose) onClose();
  };

  if (!error || !open) return null;

  return (
    <ErrorContainer>
      <Collapse in={open}>
        <Alert
          severity={severity}
          action={
            <Box display="flex" gap={1}>
              {onRetry && (
                <Button 
                  color="inherit" 
                  size="small" 
                  onClick={onRetry}
                >
                  {retryText}
                </Button>
              )}
              {closable && (
                <Button 
                  color="inherit" 
                  size="small" 
                  onClick={handleClose}
                  endIcon={<Close fontSize="small" />}
                >
                  Close
                </Button>
              )}
            </Box>
          }
        >
          <AlertTitle>{title}</AlertTitle>
          {typeof error === 'string' ? error : error.message || 'An unknown error occurred'}
        </Alert>
      </Collapse>
    </ErrorContainer>
  );
};

export default ErrorMessage;