import { FC } from 'react';

import Alert from '@material-hu/mui/Alert';
import Box from '@material-hu/mui/Box';
import Stack from '@material-hu/mui/Stack';

export type ErrorMessageProps = {
  message: string;
};

export const ErrorMessage: FC<ErrorMessageProps> = props => {
  const { message } = props;

  return (
    <Box sx={{ mt: 2 }}>
      <Stack
        sx={{
          width: '100%',
          p: 2,
          pt: 0,
        }}
      >
        <Alert
          sx={{ borderRadius: '6px' }}
          severity="error"
        >
          {message}
        </Alert>
      </Stack>
    </Box>
  );
};

export default ErrorMessage;