import { FC } from 'react';

import InsertLinkIcon from '@material-hu/icons/material/InsertLink';
import Box from '@material-hu/mui/Box';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';

import { useLokaliseTranslation } from 'src/utils/i18n';

export type CopyInvitationLinkProps = {
  handleOnDeactivateLink: () => void;
};

export const CopyInvitationLink: FC<CopyInvitationLinkProps> = props => {
  const { handleOnDeactivateLink } = props;

  const { t } = useLokaliseTranslation('invitePeople');

  return (
    <Box
      sx={{
        width: '100%',
        display: 'flex',
        justifyContent: 'space-between',
        px: 1,
      }}
    >
      <Box sx={{ display: 'flex', alignItems: 'center' }}>
        <InsertLinkIcon
          sx={{ fontSize: '16px', transform: 'rotate(-45deg)', mr: 0.5 }}
        />
        <Typography sx={{ fontSize: '12px', fontWeight: '500' }}>
          {t('INVITE_LINK')}
        </Typography>
      </Box>
      <Button
        sx={{ fontSize: '12px', fontWeight: '500', color: 'red' }}
        onClick={handleOnDeactivateLink}
      >
        {t('DEACTIVATE_LINK')}
      </Button>
    </Box>
  );
};

export default CopyInvitationLink;
