import React from 'react';
import PropTypes from 'prop-types';
import { Snackbar, Alert, AlertTitle } from '@mui/material';
import { 
  CheckCircle, 
  Error, 
  Warning, 
  Info 
} from '@mui/icons-material';

const Toast = React.memo(({ 
  open, 
  message, 
  type = 'info', 
  title,
  autoHideDuration = 4000,
  onClose,
  anchorOrigin = { vertical: 'top', horizontal: 'center' }
}) => {
  const getSeverity = () => {
    switch (type) {
      case 'success': return 'success';
      case 'error': return 'error';
      case 'warning': return 'warning';
      case 'info': 
      default: return 'info';
    }
  };

  const getIcon = () => {
    switch (type) {
      case 'success': return <CheckCircle />;
      case 'error': return <Error />;
      case 'warning': return <Warning />;
      case 'info': 
      default: return <Info />;
    }
  };

  return (
    <Snackbar
      open={open}
      autoHideDuration={autoHideDuration}
      onClose={onClose}
      anchorOrigin={anchorOrigin}
    >
      <Alert 
        onClose={onClose} 
        severity={getSeverity()}
        icon={getIcon()}
        sx={{ 
          width: '100%',
          minWidth: 300,
          maxWidth: 600
        }}
      >
        {title && <AlertTitle>{title}</AlertTitle>}
        {message}
      </Alert>
    </Snackbar>
  );
});

Toast.propTypes = {
  open: PropTypes.bool.isRequired,
  message: PropTypes.string.isRequired,
  type: PropTypes.oneOf(['success', 'error', 'warning', 'info']),
  title: PropTypes.string,
  autoHideDuration: PropTypes.number,
  onClose: PropTypes.func,
  anchorOrigin: PropTypes.object,
};

export default Toast; 