import { useNavigate } from "react-router-dom";
import { useAuth } from "../context/AuthContext";
import AccountPanel from "../components/AccountPanel";
import DiscordPanel from "../components/DiscordPanel";
import "./Pages.css";

export default function AccountPage() {
  const { user, refreshUser } = useAuth();
  const navigate = useNavigate();

  if (!user) return null;

  const hasDiscord = user.connections.some((c) => c.provider === "discord");

  return (
    <div className={`page-container ${hasDiscord ? "account-page-layout" : ""}`}>
      <AccountPanel
        user={user}
        onClose={() => navigate("/map")}
        onRefresh={refreshUser}
        mode="page"
      />
      {hasDiscord && <DiscordPanel user={user} />}
    </div>
  );
}