import { FC } from 'react';

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 { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

import FeedbackInvitationsEmails from 'src/components/dashboard/invitePeople/components/FeedbackInvitationsEmails';

export type InvitationsFeedbackCommunityProps = {
  invitationsEmails: string[];
  handleOnContinue: () => void;
};

const InvitationsFeedbackCommunity: FC<
  InvitationsFeedbackCommunityProps
> = props => {
  const { invitationsEmails, handleOnContinue } = props;

  const { t } = useTranslation();

  return (
    <Container
      sx={{
        maxWidth: { xs: '90%', sm: '70%', md: '40%' },
        py: { xs: 2, sm: 4, lg: 6 },
      }}
      maxWidth={false}
    >
      <Card sx={{ width: '100%', mt: 2, py: 3 }}>
        <FeedbackInvitationsEmails invitationsEmails={invitationsEmails} />
      </Card>
      <Box
        sx={{ width: '100%', display: 'flex', justifyContent: 'center', mt: 4 }}
      >
        <Button
          variant="contained"
          color="success"
          sx={{ width: '50%' }}
          onClick={handleOnContinue}
        >
          <Typography sx={{ fontSize: '18px', fontWeight: 600 }}>
            {t('COMMUNITY:CONTINUE')}
          </Typography>
        </Button>
      </Box>
    </Container>
  );
};

export default InvitationsFeedbackCommunity;