'use client';

import { type SlotComponentProps } from './types';
import { OrderCard } from '@/components/shared/order-card';
import { useOrdersQuery } from '@/hooks/api/orders';
import { LoadingSpinner } from '@repo/ui/components/ui/spinner';

export function SlotOrdersList({ documentId }: Readonly<SlotComponentProps>) {
  const { data: { orders } = {}, isLoading } = useOrdersQuery({
    filters: {
      slot: {
        documentId: {
          eq: documentId,
        },
      },
    },
  });

  if (isLoading) return <LoadingSpinner />;

  if (!orders?.length) return null;

  return (
    <div className="flex flex-col space-y-2">
      <h1 className="font-bold">Записи</h1>
      {orders?.map((order) => order && <OrderCard key={order.documentId} {...order} />)}
    </div>
  );
}