import { Button } from "@ariakit/react";
import { cx } from "../class-names.ts";
import { interactiveText } from "../common.css.ts";
import {
  Letterhead,
  LetterheadHeading,
  LetterheadParagraph,
} from "../Letterhead/index.tsx";

export function FailureFallbackView() {
  return (
    <Letterhead>
      <LetterheadHeading>Something went wrong</LetterheadHeading>

      <LetterheadParagraph>
        {"This is probably an issue on our side. Sorry about that!"}
      </LetterheadParagraph>

      <LetterheadParagraph>
        {"You can try "}
        <Button
          {...cx(interactiveText)}
          onClick={() => window.location.reload()}
        >
          reloading the app
        </Button>
        {". "}
        {"If the issue persists, please get in touch at "}
        <a {...cx(interactiveText)} href="mailto:support@indietabletop.club">
          support@indietabletop.club
        </a>
        {"."}
      </LetterheadParagraph>
    </Letterhead>
  );
}