import { Link } from "react-router-dom";

/**
 * The parent contract's reference, linking to that contract's detail page.
 *
 * Backoffice-local on purpose: the contract detail route differs per app
 * (`/dashboard/contract-requests/:id` here vs `/contracts/:id` in the portal),
 * so the portal keeps its own copy in `pages/bookings/booking-display.tsx`
 * rather than the two sharing a component that would have to take the route as
 * a prop at every call site.
 *
 * Renders nothing when either field is missing: `contractId` is nullable on the
 * booking, and only the bookings list/detail endpoints join `contractReference`
 * — other endpoints (warehouse, fleet, payments) return booking rows without it,
 * and a link with no id would be a dead one.
 *
 * `stopPropagation` matters: booking rows are click-to-navigate, so without it a
 * click here would race the row handler and land on the booking instead.
 */
export function ContractReferenceLink({
  contractId,
  contractReference,
  className,
}: {
  contractId?: string | null;
  contractReference?: string | null;
  className?: string;
}) {
  if (!contractId || !contractReference) return null;

  return (
    <Link
      to={`/dashboard/contract-requests/${contractId}`}
      onClick={(e) => e.stopPropagation()}
      className={
        className ??
        "block truncate font-mono text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground"
      }
    >
      {contractReference}
    </Link>
  );
}