import React from 'react';

import Text from '../../Text/Text.js';

/**
 * Displays a message with a connection error image.
 *
 * @example
 * <InternetConnectionErrorMessage />
 */
export default function InternetConnectionErrorMessage() {
  return (
    <div>
      <p>
        <Text
          id="messages.no-internet-connection"
          defaultMessage="Hmm, we’re unable to connect to the internet.<br>Please check your connection."
          html
        />
      </p>
      <svg width="120" height="93" viewBox="0 0 120 93" fill="currentColor">
        <path d="M13.5135 93H106.486C113.919 93 120 86.9871 120 79.6379V27.5259V13.3621C120 6.01293 113.919 0 106.486 0H13.5135C6.08108 0 0 6.01293 0 13.3621V27.3922V79.5043C0 86.9871 6.08108 93 13.5135 93ZM2.7027 13.3621C2.7027 7.48276 7.56757 2.67241 13.5135 2.67241H106.486C112.432 2.67241 117.297 7.48276 117.297 13.3621V24.7198H2.7027V13.3621ZM2.7027 27.3922H117.297V79.5043C117.297 85.3836 112.432 90.194 106.486 90.194H13.5135C7.56757 90.194 2.7027 85.3836 2.7027 79.5043V27.3922Z" />
        <path d="M13.6485 5.87933C9.05392 5.87933 5.40527 9.48709 5.40527 14.0302C5.40527 18.5733 9.05392 22.1811 13.6485 22.1811C18.2431 22.1811 21.8918 18.5733 21.8918 14.0302C21.8918 9.48709 18.108 5.87933 13.6485 5.87933ZM13.6485 19.375C10.5404 19.375 8.10798 16.9698 8.10798 13.8966C8.10798 10.8233 10.5404 8.41813 13.6485 8.41813C16.7566 8.41813 19.1891 10.8233 19.1891 13.8966C19.1891 16.9698 16.6215 19.375 13.6485 19.375Z" />
        <path d="M32.4322 5.87933C27.8376 5.87933 24.189 9.48709 24.189 14.0302C24.189 18.5733 27.8376 22.1811 32.4322 22.1811C37.0268 22.1811 40.6755 18.5733 40.6755 14.0302C40.6755 9.48709 36.8917 5.87933 32.4322 5.87933ZM32.4322 19.375C29.3241 19.375 26.8917 16.9698 26.8917 13.8966C26.8917 10.8233 29.3241 8.41813 32.4322 8.41813C35.5403 8.41813 37.9727 10.8233 37.9727 13.8966C37.9727 16.9698 35.4052 19.375 32.4322 19.375Z" />
        <path d="M51.2164 5.87933C46.6218 5.87933 42.9731 9.48709 42.9731 14.0302C42.9731 18.5733 46.6218 22.1811 51.2164 22.1811C55.811 22.1811 59.4596 18.5733 59.4596 14.0302C59.4596 9.48709 55.6758 5.87933 51.2164 5.87933ZM51.2164 19.375C48.1083 19.375 45.6758 16.9698 45.6758 13.8966C45.6758 10.8233 48.1083 8.41813 51.2164 8.41813C54.3245 8.41813 56.7569 10.8233 56.7569 13.8966C56.7569 16.9698 54.1894 19.375 51.2164 19.375Z" />
        <path d="M42.4924 57.2198C43.2979 62.379 47.594 66.3 52.8299 66.3H56.5219C57.4617 66.3 58.2001 65.5433 58.2001 64.5803V46.4198C58.2001 45.4567 57.4617 44.7 56.5219 44.7H52.8971C47.6611 44.7 43.2979 48.621 42.5595 53.7803H38.2783C37.3385 53.7803 36.6001 54.537 36.6001 55.5C36.6001 56.4631 37.3385 57.2198 38.2783 57.2198H42.4924ZM52.9642 48.1395H54.978V62.9293H52.9642C49.0037 62.8605 45.7816 59.5586 45.7816 55.5C45.6473 51.4414 49.0037 48.1395 52.9642 48.1395Z" />
        <path d="M60.8833 58.3204C60.0527 58.3204 59.4001 59.0771 59.4001 60.0401C59.4001 61.0032 60.0527 61.7599 60.8833 61.7599H64.3242V64.5803C64.3242 65.5433 64.9768 66.3 65.8073 66.3H69.0109C73.6384 66.3 77.4945 62.379 78.1471 57.2198H81.917C82.7476 57.2198 83.4001 56.4631 83.4001 55.5C83.4001 54.537 82.7476 53.7803 81.917 53.7803H78.2064C77.4945 48.621 73.6977 44.7 69.0703 44.7H65.8073C64.9768 44.7 64.3242 45.4567 64.3242 46.4198V49.2401H60.8833C60.0527 49.2401 59.4001 49.9968 59.4001 50.9599C59.4001 51.9229 60.0527 52.6796 60.8833 52.6796H64.3242V58.3204H60.8833ZM67.1718 48.0707H68.9516C72.4518 48.0707 75.2995 51.3726 75.2995 55.4312C75.2995 59.4898 72.4518 62.7917 68.9516 62.7917H67.1718V48.0707Z" />
      </svg>
    </div>
  );
}