import React from "react";
import { EditableMoneyItem } from "./editable-money-item";

/**
 * A read-only variant of `EditableMoneyItem` — same swatch + label + tooltip
 * layout, but without the pencil edit trigger.
 *
 * The pencil slot is still reserved (invisible) so value text stays
 * column-aligned when mixed with editable rows in the same list.
 */

export interface MoneyItemWithColorIndicatorProps {
  /** Row label (e.g. "Surplus Income") */
  label: string;
  /** Pre-formatted value string (e.g. "$2,400") */
  value: string;
  /** CSS color used for the swatch border and tinted fill */
  color: string;
  /** Fill opacity for the swatch background (default: 0.4) */
  fillOpacity?: number;
  /** Optional tooltip text shown on the info icon */
  tooltip?: string;
  className?: string;
}

export function MoneyItemWithColorIndicator(
  props: MoneyItemWithColorIndicatorProps,
) {
  return <EditableMoneyItem {...props} />;
}