'use client';

import { type ProfileProps } from './types';
import { useCustomerQuery } from '@/hooks/api/customers';
import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';
import { Card } from '@repo/ui/components/ui/card';
import { LoadingSpinner } from '@repo/ui/components/ui/spinner';

export function PersonCard({ telegramId }: Readonly<ProfileProps>) {
  const { data: { customer } = {}, isLoading } = useCustomerQuery({ 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>
  );
}