import { useAuth } from "./AuthProvider";
import { Button } from "./design-system/primitives";
import { DiscordSignInButton } from "./DiscordSignInButton";

export function AuthControls() {
  const { user, loading, busy, error, accountError, signIn, signOut, retry } = useAuth();

  return (
    <section className="ds-account-controls" aria-label="Account">
      {loading ? <p role="status">Loading account…</p> : user ? (
        <p>
          Signed in as <strong>{user.displayName}</strong> · {user.timezone}{" "}
          <Button variant="secondary" disabled={busy} onClick={signOut}>{busy ? "Signing out…" : "Sign out"}</Button>{" "}
          <a href="/api/me">View my profile</a>
        </p>
      ) : !accountError && <p><DiscordSignInButton onClick={signIn} /></p>}
      {error && <p role="alert">{error}</p>}
      {accountError && <Button variant="secondary" onClick={retry}>Try again</Button>}
    </section>
  );
}
