import { getCustomer } from '@/actions/api/customers';
import { Container } from '@/components/layout';
import { PageHeader } from '@/components/navigation';
import {
  BookContactButton,
  ContactDataCard,
  PersonCard,
  ProfileOrdersList,
} from '@/components/profile';
import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';

type Props = { params: Promise<{ telegramId: string }> };

export default async function ProfilePage(props: Readonly<Props>) {
  const parameters = await props.params;
  const telegramId = Number.parseInt(parameters.telegramId, 10);

  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({
    queryFn: () => getCustomer({ telegramId }),
    queryKey: ['customer', telegramId],
  });

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <PageHeader title="Профиль контакта" />
      <Container className="px-0">
        <PersonCard telegramId={telegramId} />
        <ContactDataCard telegramId={telegramId} />
        <ProfileOrdersList telegramId={telegramId} />
        <BookContactButton telegramId={telegramId} />
      </Container>
    </HydrationBoundary>
  );
}