edr-platform/apps/edr-freight-web/backoffice/src/components/contracts/ContractApprovalProgressCell.tsx

import { formatContractApprovalProgress } from "@/features/contracts/contract-approval-progress";
import type { ContractListRow } from "@/features/contracts/mapContractListRow";
import { cn } from "@/lib/utils";

interface ContractApprovalProgressCellProps {
  row: ContractListRow;
}

export function ContractApprovalProgressCell({
  row,
}: ContractApprovalProgressCellProps) {
  const summary = formatContractApprovalProgress(row.status, row.approvalSteps);

  return (
    <div className="min-w-[8.5rem] py-1">
      <p
        className={cn(
          "text-sm font-semibold",
          summary.complete
            ? "text-[color:var(--freight-brand)]"
            : "text-foreground",
        )}
      >
        {summary.label}
      </p>
      {summary.detail ? (
        <p className="mt-0.5 line-clamp-2 text-[11px] leading-snug text-muted-foreground">
          {summary.detail}
        </p>
      ) : null}
    </div>
  );
}