'use client';

import { DataNotFound } from '../shared/alert';
import { ServiceCard } from '../shared/service-card';
import { type OrderComponentProps } from './types';
import { useOrderQuery } from '@/hooks/api/orders';
import { LoadingSpinner } from '@repo/ui/components/ui/spinner';

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

  return (
    <div className="flex flex-col space-y-2">
      <h1 className="font-bold">Услуги</h1>
      {isLoading && <LoadingSpinner />}
      {!isLoading && !order?.services?.length ? <DataNotFound title="Услуги не найдены" /> : null}
      {order?.services?.map(
        (service) => service && <ServiceCard key={service.documentId} {...service} />,
      )}
    </div>
  );
}