import { type TFunction, Trans } from 'react-i18next';

import i18next from 'i18next';
import Typography from '@material-hu/mui/Typography';

import HuLink from '@material-hu/components/design-system/Link';

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

const TermsOfUseAndPrivacy = () => {
  const { t } = useLokaliseTranslation('authentication');

  const language = i18next.language;

  const { termsOfUseHref, privacyPolicyHref } =
    getTermsOfUseAndPrivacyLink(language);

  const termsOfUseLink = (
    <HuLink
      href={termsOfUseHref}
      target="_blank"
      rel="noopener"
      sx={{
        display: 'inline-block',
        '&:visited': {
          color: theme => theme.palette.new?.text?.neutral?.brand,
          textDecorationColor: theme => theme.palette.new?.text?.neutral?.brand,
        },
      }}
    >
      Términos de uso
    </HuLink>
  );

  const privacyPolicyLink = (
    <HuLink
      href={privacyPolicyHref}
      target="_blank"
      rel="noopener"
      sx={{
        display: 'inline-block',
        '&:visited': {
          color: theme => theme.palette.new?.text?.neutral?.brand,
          textDecorationColor: theme => theme.palette.new?.text?.neutral?.brand,
        },
      }}
    >
      Privacidad
    </HuLink>
  );

  return (
    <Typography
      variant="globalXS"
      sx={{
        color: theme => theme.palette.new?.text?.neutral?.lighter,
        textAlign: 'center',
        alignSelf: 'flex-start',
      }}
    >
      <Trans
        i18nKey={t('TERMS_OF_USE_AND_PRIVACY')}
        t={t as TFunction}
        components={{
          1: termsOfUseLink,
          3: privacyPolicyLink,
        }}
      />
    </Typography>
  );
};

export default TermsOfUseAndPrivacy;