import React from 'react';

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

/**
 * Displays a message with an image.
 *
 * @example
 * <ServerErrorMessage />
 */
export default function ServerErrorMessage() {
  return (
    <div>
      <p>
        <Text
          id="messages.server-error"
          defaultMessage="We can’t seem to retrieve your notifications.<br>Please check back soon."
          html
        />
      </p>
      <svg width="120" height="94" viewBox="0 0 120 94" fill="currentColor">
        <path d="M13.5135 94H106.486C113.919 94 120 87.9224 120 80.4942V27.8218V13.5057C120 6.07759 113.919 0 106.486 0H13.5135C6.08108 0 0 6.07759 0 13.5057V27.6868V80.3592C0 87.9224 6.08108 94 13.5135 94ZM2.7027 13.5057C2.7027 7.56322 7.56757 2.70115 13.5135 2.70115H106.486C112.432 2.70115 117.297 7.56322 117.297 13.5057V24.9856H2.7027V13.5057ZM2.7027 27.6868H117.297V80.3592C117.297 86.3017 112.432 91.1638 106.486 91.1638H13.5135C7.56757 91.1638 2.7027 86.3017 2.7027 80.3592V27.6868Z" />
        <path d="M13.6486 5.9425C9.05404 5.9425 5.4054 9.58906 5.4054 14.181C5.4054 18.773 9.05404 22.4195 13.6486 22.4195C18.2432 22.4195 21.8919 18.773 21.8919 14.181C21.8919 9.58906 18.1081 5.9425 13.6486 5.9425ZM13.6486 19.5833C10.5405 19.5833 8.1081 17.1523 8.1081 14.046C8.1081 10.9396 10.5405 8.5086 13.6486 8.5086C16.7567 8.5086 19.1892 10.9396 19.1892 14.046C19.1892 17.1523 16.6216 19.5833 13.6486 19.5833Z" />
        <path d="M32.4325 5.9425C27.8379 5.9425 24.1892 9.58906 24.1892 14.181C24.1892 18.773 27.8379 22.4195 32.4325 22.4195C37.027 22.4195 40.6757 18.773 40.6757 14.181C40.6757 9.58906 36.8919 5.9425 32.4325 5.9425ZM32.4325 19.5833C29.3243 19.5833 26.8919 17.1523 26.8919 14.046C26.8919 10.9396 29.3243 8.5086 32.4325 8.5086C35.5406 8.5086 37.973 10.9396 37.973 14.046C37.973 17.1523 35.4054 19.5833 32.4325 19.5833Z" />
        <path d="M51.2163 5.9425C46.6217 5.9425 42.973 9.58906 42.973 14.181C42.973 18.773 46.6217 22.4195 51.2163 22.4195C55.8109 22.4195 59.4595 18.773 59.4595 14.181C59.3244 9.58906 55.6757 5.9425 51.2163 5.9425ZM51.2163 19.5833C48.1082 19.5833 45.6757 17.1523 45.6757 14.046C45.6757 10.9396 48.1082 8.5086 51.2163 8.5086C54.3244 8.5086 56.7568 10.9396 56.7568 14.046C56.6217 17.1523 54.1892 19.5833 51.2163 19.5833Z" />
        <path d="M18.9188 75.6321C19.1891 75.9022 19.5945 76.0373 19.8648 76.0373C20.135 76.0373 20.5405 75.9022 20.8107 75.6321L36.4864 59.9655C37.0269 59.4252 37.0269 58.6149 36.4864 58.0746L20.8107 42.408C20.2702 41.8678 19.4594 41.8678 18.9188 42.408C18.3783 42.9482 18.3783 43.7586 18.9188 44.2988L33.6486 59.0201L18.9188 73.7413C18.3783 74.2815 18.3783 75.0919 18.9188 75.6321Z" />
        <path d="M47.5675 60.3707H72.2973C73.1081 60.3707 73.6486 59.8305 73.6486 59.0201C73.6486 58.2098 73.1081 57.6696 72.2973 57.6696H47.5675C46.7567 57.6696 46.2162 58.2098 46.2162 59.0201C46.2162 59.8305 46.8919 60.3707 47.5675 60.3707Z" />
      </svg>
    </div>
  );
}