/*
 * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */

import React from "react";

type Props = {
  message: string;
  onRestart: () => void;
};

export default class ErrorMessage extends React.Component<Props> {
  render() {
    return (
      <div className="text-center">
        <svg
          className="bi bi-emoji-frown"
          width="150px"
          height="150px"
          viewBox="0 0 16 16"
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path fillRule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
          <path
            fillRule="evenodd"
            d="M4.285 12.433a.5.5 0 0 0 .683-.183A3.498 3.498 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.498 4.498 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683z"
          />
          <path d="M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z" />
        </svg>
        <h2 className="mt-4">Something went wrong</h2>
        <h3 className="mt-2">
          <small className="text-muted">{this.props.message}</small>
        </h3>
        <button type="button" className="btn btn-primary btn-lg mt-5" onClick={this.props.onRestart}>
          Try again
        </button>
      </div>
    );
  }
}