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";
import { useAppActions } from "../store/index.tsx";

export function AccountIssueView(props: { reload: () => void }) {
  const { reload } = props;
  const { logout } = useAppActions();

  return (
    <Letterhead>
      <LetterheadHeading>Account issue</LetterheadHeading>

      <LetterheadParagraph>
        You appear to be logged into an account that no longer exists, or is not
        working as expected. Sorry about that!
      </LetterheadParagraph>

      <LetterheadParagraph>
        {"You can try "}
        <Button
          {...cx(interactiveText)}
          onClick={async () => {
            await logout();
            reload();
          }}
        >
          logging out
        </Button>
        {" and in again. "}
        {"If the issue persists, please get in touch at "}
        <a {...cx(interactiveText)} href="mailto:support@indietabletop.club">
          support@indietabletop.club
        </a>
        {"."}
      </LetterheadParagraph>
    </Letterhead>
  );
}