'use client';
import { OrderCard } from './components/order-card';
import { type SlotComponentProps } from './types';
import { useSlotQuery } from '@/hooks/slots';
import { cn } from '@repo/ui/lib/utils';

export function OrdersList({
  className,
  documentId,
}: Readonly<SlotComponentProps> & { readonly className?: string }) {
  const { data } = useSlotQuery({ documentId });
  const slot = data?.data?.slot;

  return (
    <div className={cn('bg-transparent p-4', className)}>
      <h1 className="mb-2 text-2xl font-bold">Записи</h1>
      {slot?.orders.map((order) => {
        return order && <OrderCard key={order?.documentId} {...order} />;
      })}
    </div>
  );
}