'use client';
import { DataNotFound } from '../shared/alert';
import { ContactRow } from '../shared/contact-row';
import { type OrderComponentProps } from './types';
import { useOrderQuery } from '@/hooks/api/orders';
import { LoadingSpinner } from '@repo/ui/components/ui/spinner';

export function OrderContacts({ documentId }: Readonly<OrderComponentProps>) {
  const { data: { order } = {}, isLoading } = useOrderQuery({ documentId });

  const noContacts = !order?.slot?.master && !order?.client;

  return (
    <div className="flex flex-col space-y-2">
      <h1 className="font-bold">Участники</h1>
      <div className="space-y-2">
        {isLoading && <LoadingSpinner />}
        {!isLoading && noContacts ? <DataNotFound title="Пользователи не найдены" /> : null}
        {order?.slot?.master && (
          <ContactRow
            className="rounded-2xl bg-background p-2 px-4 dark:bg-primary/5"
            description="Мастер"
            {...order.slot?.master}
          />
        )}
        {order?.client && (
          <ContactRow
            className="rounded-2xl bg-background p-2 px-4 dark:bg-primary/5"
            description="Клиент"
            {...order.client}
          />
        )}
      </div>
    </div>
  );
}