import { getApiBaseUrl } from "@shared/api/config";

interface ProfileCardProps {
  email: string;
  displayName: string;
  avatarUrl?: string | null;
}

export function ProfileCard({ email, displayName, avatarUrl }: ProfileCardProps): JSX.Element {
  const apiBase = getApiBaseUrl();
  const resolvedAvatar = avatarUrl?.startsWith("/") ? `${apiBase}${avatarUrl}` : avatarUrl;

  return (
    <section>
      <h2>Profile</h2>
      {resolvedAvatar ? (
        <img
          src={resolvedAvatar}
          alt={`${displayName} avatar`}
          width={96}
          height={96}
          style={{ borderRadius: "50%", objectFit: "cover" }}
        />
      ) : null}
      <p>{displayName}</p>
      <p>{email}</p>
    </section>
  );
}
