import React from "react";
import { Pencil } from "lucide-react";
import { cn } from "@/lib/utils";

/**
 * A compact row showing a label and pre-formatted value with an optional
 * pencil edit trigger. Used inside accordion income/expense groups in the
 * Borrowing Capacity Calculator panel (e.g. "Avg Income Per Month").
 */

export interface CalculatorInputItemProps {
  /** Row label (e.g. "Avg Income Per Month") */
  label: string;
  /** Pre-formatted value string (e.g. "$8,500") */
  value: string;
  /** Called when the pencil button is clicked */
  onEdit?: () => void;
  className?: string;
}

export function CalculatorInputItem({
  label,
  value,
  onEdit,
  className,
}: CalculatorInputItemProps) {
  return (
    <div
      className={cn("flex items-center justify-between gap-3 py-2", className)}
    >
      <span className="truncate text-sm text-muted-foreground">{label}</span>
      <div className="flex shrink-0 items-center gap-1">
        <span className="text-base font-semibold tabular-nums text-foreground">
          {value}
        </span>
        {onEdit && (
          <button
            type="button"
            aria-label="Edit value"
            onClick={onEdit}
            className="p-1 text-muted-foreground transition-colors hover:text-foreground"
          >
            <Pencil size={14} />
          </button>
        )}
      </div>
    </div>
  );
}