zapishis-client/apps/web/components/profile/person-card.tsx

'use client';
import { LoadingSpinner } from '../common/spinner';
import { type ProfileProps } from './types';
import { useProfileQuery } from '@/hooks/profile';
import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';
import { Card } from '@repo/ui/components/ui/card';

export function PersonCard({ telegramId }: Readonly<ProfileProps>) {
  const { data: customer, isLoading } = useProfileQuery({ telegramId });

  if (isLoading || !customer)
    return (
      <div className="p-4">
        <LoadingSpinner />
      </div>
    );

  return (
    <Card className="bg-transparent p-4 shadow-none">
      <div className="flex flex-col items-center space-y-2">
        <Avatar className="size-20">
          <AvatarImage alt={customer?.name} src={customer.photoUrl || ''} />
          <AvatarFallback>{customer?.name.charAt(0)}</AvatarFallback>
        </Avatar>
        <h2 className="text-2xl font-bold">{customer?.name}</h2>
      </div>
    </Card>
  );
}