import { FC } from 'react';
import { useNavigate } from 'react-router-dom';

import CheckCircleOutlineIcon from '@material-hu/icons/material/CheckCircleOutline';
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 Button from '@material-hu/components/design-system/Buttons/Button';

import { useTranslation } from 'src/pages/dashboard/recognitions/i18n';

import { recognitionsRoutes } from '../routes';

export type SuccessIdeaProps = {
  message: string;
};

export const SuccessIdea: FC<SuccessIdeaProps> = props => {
  const { message } = props;

  const navigate = useNavigate();
  const { t } = useTranslation();

  const handleGoBack = () => navigate(recognitionsRoutes.home());

  return (
    <Container
      sx={{ py: 4 }}
      maxWidth="sm"
    >
      <Card
        sx={{
          width: '100%',
          backgroundColor: '#edf7ed',
          borderRadius: '4px',
        }}
      >
        <Box sx={{ p: 3, display: 'flex' }}>
          <CheckCircleOutlineIcon
            sx={{ color: '#2e7d32', mr: 1, mt: 0.2 }}
            fontSize="small"
          />
          <Typography sx={{ color: '#1e4620' }}>{message}</Typography>
        </Box>
      </Card>
      <Box
        sx={{
          mt: 3,
          width: '100%',
          justifyContent: 'flex-end',
          display: 'flex',
        }}
      >
        <Button onClick={handleGoBack}>{t('GO_BACK_MENU')}</Button>
      </Box>
    </Container>
  );
};

export default SuccessIdea;