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 NoConnectionView(props: {
  latestAttemptTs: number;
  onRetry: () => void;
}) {
  const { latestAttemptTs, onRetry } = props;

  return (
    <Letterhead>
      <LetterheadHeading>No connection</LetterheadHeading>

      <LetterheadParagraph>
        {"There seems to be an issue reaching to our servers. "}
        {"Are you connected to the internet? Last attempt at "}
        {new Date(latestAttemptTs).toLocaleTimeString()}
        {"."}
      </LetterheadParagraph>

      <LetterheadParagraph>
        <Button {...cx(interactiveText)} onClick={() => onRetry()}>
          Try again
        </Button>
      </LetterheadParagraph>
    </Letterhead>
  );
}