"use client"

import * as Sentry from "@sentry/nextjs"
import { useEffect } from "react"

import Image from "@/components/Image"

/* eslint-disable formatjs/no-literal-string-in-jsx */
export default function GlobalError({
  error,
}: {
  error: Error & { digest?: string }
}) {
  console.log({ global_error: error })

  useEffect(() => {
    Sentry.captureException(error)
  }, [error])

  return (
    <html>
      <head>
        <style>
          {`
            body {
              font-family: Helvetica, Arial, sans-serif;
              padding: 32px;
            }

            a {
              color: #4d001b;
            }
            a:hover {
             color: #8f4350;
            }

            .title {
              text-transform: uppercase;
            }

            .content {
              display: flex;
              flex-direction: column;
              gap: 20px;
              max-width: 600px;
              margin: 0 auto;
            }

            .logo {
              display: flex;
              justify-content: center;
              padding: 24px;
            }
            .phoneNumbers, .links {
              display: flex;
              flex-direction: column;
              gap: 8px;
              padding: 0;
              margin: 0;
              list-style: none;
            }
          `}
        </style>
      </head>
      <body>
        <div className="logo">
          <Image
            alt="Scandic Hotels logotype"
            height={22}
            src="/_static/img/scandic-logotype.svg"
            width={103}
          />
        </div>

        <div className="content">
          <h1 className="title">SORRY, SOMETHING WENT WRONG!</h1>

          <p>
            <strong>
              {
                "While we're working hard to fix it, you can always give us a call:"
              }
            </strong>
          </p>

          <ul className="phoneNumbers">
            <li>
              Denmark: <a href="tel:+4533480400">+45 33 48 04 00</a>
            </li>
            <li>
              Finland: <a href="tel:+358020081800">+358 0200 81 800</a>
            </li>
            <li>
              Norway: <a href="tel:+4723155000">+47 23 15 50 00</a>
            </li>
            <li>
              Sweden: <a href="tel:+46851751700">+46 8 517 517 00</a>
            </li>
            <li>
              International: <a href="tel:+46851751720">+46 8 517 517 20</a>
            </li>
          </ul>

          <p>
            <strong>
              You can also switch languages to try if it works better this way:
            </strong>
          </p>

          <ul className="links">
            <li>
              <a href="https://www.scandichotels.com/da">Danish</a>
            </li>
            <li>
              <a href="https://www.scandichotels.com/en">English</a>
            </li>
            <li>
              <a href="https://www.scandichotels.com/fi">Finnish</a>
            </li>
            <li>
              <a href="https://www.scandichotels.com/de">German</a>
            </li>
            <li>
              <a href="https://www.scandichotels.com/no">Norwegian</a>
            </li>
            <li>
              <a href="https://www.scandichotels.com/sv">Swedish</a>
            </li>
          </ul>
          <p>
            <strong>Thanks for your patience!</strong>
          </p>
        </div>
      </body>
    </html>
  )
}
