Session timeout

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { SessionTimeout } from "@/components/ui/session-timeout"

const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));

export function SessionTimeoutDemo() {
  const [expiresAt, setExpiresAt] = useState<number | null>(null);
  const [note, setNote] = useState("Signed in.");
  return (
    <div className="grid justify-items-center gap-3">
      <Button variant="secondary" onClick={() => { setNote("Session ends in 20 seconds."); setExpiresAt(Date.now() + 20_000); }}>End my session in 20 seconds</Button>
      <p className="text-xs text-muted-foreground" role="status">{note}</p>
      {expiresAt && (
        <SessionTimeout
          expiresAt={expiresAt}
          warnBefore={15}
          onExtend={async () => {
            await wait(500);
            setExpiresAt(null);
            setNote("You are still signed in.");
          }}
          onSignOut={() => {
            setExpiresAt(null);
            setNote("Signed out.");
          }}
        />
      )}
    </div>
  );
}