import { useQuery } from "@tanstack/react-query";
import { ProfileCard, ProfileEditor } from "@modules/profile";
import { getProfile } from "@modules/profile/api/profileApi";

export default function ProfilePage(): JSX.Element {
  const { data, isLoading } = useQuery({
    queryKey: ["profile-me"],
    queryFn: getProfile
  });

  if (isLoading || !data) {
    return (
      <main>
        <p>Loading profile...</p>
      </main>
    );
  }

  return (
    <main style={{ display: "grid", gap: "2rem", padding: "1.5rem" }}>
      <ProfileCard
        email={data.user.email}
        displayName={data.profile.display_name}
        avatarUrl={data.profile.avatar_url}
      />
      <ProfileEditor profile={data} />
    </main>
  );
}