import { orderBookingClient } from '../../api/clients';
import { ORDER_BOOKING } from '../../api/config';
import type { WiredDetailViewProps } from './OrderDetail';
import { useDetailViewData } from './useDetailViewData';
import { Spinner } from '../reusable/Spinner';
import { EmptyState } from '../reusable/EmptyState';
import { CallCard } from '../cards/CallCard';

export function CallDetail({ instanceId }: WiredDetailViewProps) {
  const { data, loading, error } = useDetailViewData(orderBookingClient, ORDER_BOOKING.detailViews.CALLS, instanceId);

  if (error) return <EmptyState title="Couldn't load record" hint={error} />;
  if (loading) return <div className="py-8 flex justify-center"><Spinner label="Loading Call Details..." /></div>;
  if (!data) return <EmptyState title="No details found" />;

  return (
    <div className="w-full space-y-6 pb-24">
      <CallCard row={data} isDetailView={true} />
    </div>
  );
}