import clsx from 'clsx';
import { useTranslation } from 'react-i18next';
import { FaTimesCircle, FaExclamationCircle } from 'react-icons/fa';

import RequestWrapper from 'pages/Bridge/RequestWrapper';
import { WRAPPED_TOKEN_SYMBOL } from 'config/relay-chains';
import { POLKADOT, KUSAMA } from 'utils/constants/relay-chain-names';

const CancelledIssueRequest = (): JSX.Element => {
  const { t } = useTranslation();

  return (
    <RequestWrapper className='px-12'>
      <h2 className={clsx('text-3xl', 'font-medium', 'text-interlayCinnabar')}>{t('cancelled')}</h2>
      <FaTimesCircle className={clsx('w-40', 'h-40', 'text-interlayCinnabar')} />
      <p
        className={clsx(
          { 'text-interlayTextSecondaryInLightMode': process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT },
          { 'dark:text-kintsugiTextSecondaryInDarkMode': process.env.REACT_APP_RELAY_CHAIN_NAME === KUSAMA },
          'text-justify'
        )}
      >
        {t('issue_page.you_did_not_send', {
          wrappedTokenSymbol: WRAPPED_TOKEN_SYMBOL
        })}
      </p>
      {/* TODO: could componentize */}
      <div>
        <h6 className={clsx('flex', 'items-center', 'justify-center', 'space-x-0.5', 'text-interlayCinnabar')}>
          <span>{t('note')}</span>
          <FaExclamationCircle />
        </h6>
        <p
          className={clsx(
            'text-justify',
            { 'text-interlayTextSecondaryInLightMode': process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT },
            { 'dark:text-kintsugiTextSecondaryInDarkMode': process.env.REACT_APP_RELAY_CHAIN_NAME === KUSAMA }
          )}
        >
          {t('issue_page.contact_team')}
        </p>
      </div>
    </RequestWrapper>
  );
};

export default CancelledIssueRequest;