'use client';
import { ContactRow } from '../shared/contact-row';
import { type OrderComponentProps } from './types';
import { useOrderQuery } from '@/hooks/api/orders';

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

  if (!order) return null;

  return (
    <div className="flex flex-col space-y-2">
      <h1 className="font-bold">Участники</h1>
      <div className="space-y-2">
        {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>
  );
}