edr-platform/apps/edr-freight-web/backoffice/src/components/bookings/BookingApprovalProgressCell.tsx

import { formatApprovalProgress } from "@/features/bookings/approval-progress";
import type { BookingListRow } from "@/types/booking";
import { cn } from "@/lib/utils";

interface BookingApprovalProgressCellProps {
  row: BookingListRow;
}

export function BookingApprovalProgressCell({ row }: BookingApprovalProgressCellProps) {
  const summary = formatApprovalProgress(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>
  );
}