Session Revocation

"use client";

import { MonitorCheck, ShieldAlert } from "lucide-react";
import { useAuth } from "@authingo/react";

export function Dashboard() {
  const { user, logout } = useAuth();

  if (!user) return null;

  return (
    <div className="card">
      <div className="header-flex">
        <div>
          <p className="eyebrow">Security Center</p>
          <h2>Current Session</h2>
        </div>
        <ShieldAlert className="text-blue" size={28} />
      </div>

      <p className="muted mb-4">
        This is the real session returned by the AuthInGo backend. Revoking it
        calls logout(), deletes the database session, and returns you to login.
      </p>

      <div className="session-list">
        <div className="session-item current">
          <div className="device-info">
            <MonitorCheck size={20} className="text-blue" />
            <div>
              <strong>Current browser session</strong>
              <span className="badge">Live</span>
              <p className="meta">{user.email}</p>
              <p className="meta">User ID: {user.id}</p>
            </div>
          </div>
          <button onClick={() => logout()} className="button danger-outline">
            Revoke
          </button>
        </div>
      </div>
    </div>
  );
}