import { LogOut, UserRound } from "lucide-react";
import type { Session } from "../api/types";
import { api } from "../api/client";
import { Panel } from "../components/ui";
import { navigate } from "../router";

export function ProfilePage({ session, onSessionChange }: { session: Session; onSessionChange: () => Promise<void> }) {
  async function logout() {
    await api.logout();
    await onSessionChange();
    navigate("/login");
  }

  return (
    <div className="page-grid">
      <Panel className="span-2 profile-panel">
        <UserRound size={28} />
        <h1>{session.user?.name ?? "Lecteur invite"}</h1>
        <p>{session.user?.email ?? "Session non connectee"}</p>
        <span>{session.user?.role ?? "vitrine"}</span>
        <button className="ghost-button" onClick={logout}>
          <LogOut size={17} />
          Sortir
        </button>
      </Panel>
    </div>
  );
}