import { FC } from 'react';

import WarningAmberIcon from '@material-hu/icons/material/WarningAmber';
import Box from '@material-hu/mui/Box';
import Card from '@material-hu/mui/Card';
import Container from '@material-hu/mui/Container';
import Typography from '@material-hu/mui/Typography';

import { useTranslation } from './i18n';

export const AlreadyEventRegistration: FC = () => {
  const { t } = useTranslation();

  return (
    <Container
      sx={{ py: 4 }}
      maxWidth="sm"
    >
      <Card
        sx={{
          width: '100%',
          backgroundColor: '#fff4e5',
          borderRadius: '4px',
        }}
      >
        <Box sx={{ p: 3, display: 'flex' }}>
          <WarningAmberIcon
            sx={{ color: '#ed6c02', mr: 1, mt: 0.2 }}
            fontSize="small"
          />
          <Typography sx={{ color: '#663c00' }}>
            {t('ALREADY_EVENT_REGISTRATION')}
          </Typography>
        </Box>
      </Card>
    </Container>
  );
};

export default AlreadyEventRegistration;