import { cn } from "@/lib/utils";

import type { TransactionStatusTag, TransactionStatusTagKey } from "../../_lib/transaction-category-status";

const TAG_TEXT_CLASS: Record<TransactionStatusTagKey, string> = {
  redeemed: "text-red-600 dark:text-red-400",
  "option-closed": "text-red-600 dark:text-red-400",
  expired: "text-red-600 dark:text-red-400",
  delivered: "text-red-600 dark:text-red-400",
  "maturity-expired": "text-red-600 dark:text-red-400",
  split: "text-red-600 dark:text-red-400",
  "reverse-split": "text-red-600 dark:text-red-400",
};

/**
 * Category on the first line; colored lifecycle labels on the next line
 * (e.g. "(Maturity Expired)"), with multi-word tags kept together via NBSP.
 */
export function TransactionCategoryCell({
  category,
  tags,
}: {
  category: string;
  tags: readonly TransactionStatusTag[];
}) {
  const label = category.trim();
  if (!label && tags.length === 0) return <span className="text-sm">—</span>;

  return (
    <div className="flex min-w-0 flex-col items-start gap-0.5 text-sm leading-snug">
      {label ? <span>{label}</span> : null}
      {tags.length > 0 ? (
        <span className="whitespace-nowrap">
          {tags.map((tag, index) => (
            <span key={tag.key} className={cn("whitespace-nowrap", TAG_TEXT_CLASS[tag.key])}>
              {index > 0 ? "\u00A0" : null}({tag.label})
            </span>
          ))}
        </span>
      ) : null}
    </div>
  );
}