'use client';
import { type OrderComponentProps } from './types';
import { useOrderQuery } from '@/hooks/api/orders';
import { type ServiceFieldsFragment } from '@repo/graphql/types';

type ServiceCardProps = Pick<ServiceFieldsFragment, 'name'>;

export function OrderServices({ 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>
      {order.services?.map(
        (service) => service && <ServiceCard key={service.documentId} {...service} />,
      )}
    </div>
  );
}

function ServiceCard({ name }: Readonly<ServiceCardProps>) {
  return (
    <div className="flex items-center justify-between rounded-2xl border-2 bg-background p-4 px-6">
      {name}
    </div>
  );
}