/**
 * Shown when the app can't reach the Tailor backend — either because the
 * browser is offline (AuthGuard) or because a post-auth request to the GraphQL
 * endpoint failed with no auth-specific error (ActiveUserGuard).
 *
 * Wording is intentionally env-neutral: it does NOT mention the VPN/exit-node,
 * because in prod/uat the app is publicly reachable and a VPN hint would be
 * misleading. Engineers running against local/dev/stg already know they need
 * Tailscale.
 */
export interface ConnectivityErrorScreenProps {
  /**
   * Optional click handler for a Retry button. When omitted, no button is
   * rendered — useful when the surrounding component auto-recovers (e.g.
   * AuthGuard re-renders the moment the browser fires the `online` event).
   */
  onRetry?: () => void;
}

export const ConnectivityErrorScreen = ({ onRetry }: ConnectivityErrorScreenProps) => (
  <main className="min-h-screen grid place-items-center px-4">
    <div className="w-full max-w-sm rounded-lg border bg-card p-6 space-y-4">
      <h1 className="text-lg font-semibold">Can't reach the server</h1>
      <p className="text-sm text-muted-foreground">
        We couldn't connect to verify your account. Check your network connection and try again.
      </p>
      {onRetry && (
        <button
          type="button"
          onClick={onRetry}
          className="inline-flex h-9 w-full items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90"
        >
          Retry
        </button>
      )}
    </div>
  </main>
);