'use client';

import { useSuspenseQuery } from '@tanstack/react-query';
import { approvalByIdOptions } from '../queries';
import { ApprovalRequestPanel } from './approval-request-panel';

export function ApprovalDetail({
  approvalId,
  canApprove,
  canReject,
  canReturn,
  canCancel,
  activeBusinessRole,
  isOrgAdmin,
  currentUserId
}: {
  approvalId: string;
  canApprove: boolean;
  canReject: boolean;
  canReturn: boolean;
  canCancel: boolean;
  activeBusinessRole: string | null;
  isOrgAdmin: boolean;
  currentUserId: string;
}) {
  const { data } = useSuspenseQuery(approvalByIdOptions(approvalId));
  const entityHref =
    data.approval.request.entityType === 'quotation'
      ? `/dashboard/crm/quotations/${data.approval.request.entityId}`
      : undefined;

  return (
    <ApprovalRequestPanel
      approval={data.approval}
      canApprove={canApprove}
      canReject={canReject}
      canReturn={canReturn}
      canCancel={canCancel}
      activeBusinessRole={activeBusinessRole}
      isOrgAdmin={isOrgAdmin}
      currentUserId={currentUserId}
      entityHref={entityHref}
    />
  );
}
