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

import { Badge, Group } from "@mantine/core";
import { Repeat } from "lucide-react";

import {
  CONTRACT_STATUS_COLOR,
  CONTRACT_STATUS_STYLES,
} from "@/features/contracts/contract-status.config";

interface ContractStatusBadgeProps {
  status: string;
  /** When the contract is a renewal of a prior one, show a sibling badge. */
  isRenewal?: boolean;
}

export function ContractStatusBadge({
  status,
  isRenewal,
}: ContractStatusBadgeProps) {
  const style = CONTRACT_STATUS_STYLES[status] ?? {
    label: status,
    color: "gray",
  };
  const color = CONTRACT_STATUS_COLOR[status] ?? "gray";

  const statusBadge = (
    <Badge
      color={color}
      variant="light"
      size="sm"
      radius="md"
      tt="uppercase"
      fw={600}
      title={style.label}
      style={{
        fontSize: "0.7rem",
        letterSpacing: "0.05em",
        display: "inline-flex",
        maxWidth: "100%",
        whiteSpace: "nowrap",
      }}
    >
      {style.label}
    </Badge>
  );

  if (!isRenewal) return statusBadge;

  return (
    <Group gap={4} wrap="nowrap">
      {statusBadge}
      <Badge
        color="indigo"
        variant="light"
        size="sm"
        radius="md"
        tt="uppercase"
        fw={600}
        leftSection={<Repeat size={12} />}
        title="Renewal of a prior contract"
        style={{
          fontSize: "0.7rem",
          letterSpacing: "0.05em",
          display: "inline-flex",
          whiteSpace: "nowrap",
        }}
      >
        Renewal
      </Badge>
    </Group>
  );
}