import React, { type JSX } from 'react';
import { isMobile } from '@digigov/ui/app/OutdatedBrowserBanner/hooks/evaluateBrowserVersion';
import useOutdatedBrowserCheck from '@digigov/ui/app/OutdatedBrowserBanner/hooks/useOutdatedBrowserCheck';
import { WarningText } from '@digigov/ui/feedback/WarningText';
import { useTranslation } from '@digigov/ui/i18n';
import Link from '@digigov/ui/navigation/Link';
import Paragraph from '@digigov/ui/typography/Paragraph';

export default function OutdatedBrowserBanner(): JSX.Element {
  const mob = isMobile;
  const [shouldUpdate, updateLink] = useOutdatedBrowserCheck();
  const { t } = useTranslation();
  return (
    <WarningText>
      {shouldUpdate ? (
        <>
          {mob.any() ? (
            <>
              <Paragraph>{t('outdated.mobile')}</Paragraph>
            </>
          ) : (
            <>
              <Paragraph>
                {t('outdated.web')}
                <Link href={updateLink} target="_blank">
                  {updateLink}{' '}
                </Link>
              </Paragraph>
            </>
          )}
        </>
      ) : (
        <></>
      )}
    </WarningText>
  );
}

export * from '@digigov/ui/app/OutdatedBrowserBanner/hooks/useOutdatedBrowserCheck';
