import InlineNumber from "./InlineNumber";
import styles from "./CurrencyRow.module.css";

interface CurrencyRowProps {
  gp: number;
  sp: number;
  cp: number;
  onChange: (field: "gp" | "sp" | "cp", value: number) => void;
  mode?: "view" | "edit";
}

export default function CurrencyRow({
  gp,
  sp,
  cp,
  onChange,
  mode = "view",
}: CurrencyRowProps) {
  return (
    <div className={styles.row}>
      <div className={styles.coin}>
        <span className={`${styles.coinLabel} ${styles.gp}`}>GP</span>
        {mode === "edit" ? (
          <input
            className={styles.coinInput}
            type="number"
            min={0}
            value={gp}
            onChange={(e) => onChange("gp", Number(e.target.value))}
          />
        ) : (
          <InlineNumber
            value={gp}
            onChange={(v) => onChange("gp", v)}
            className={styles.coinValue}
            min={0}
          />
        )}
      </div>
      <div className={styles.coin}>
        <span className={`${styles.coinLabel} ${styles.sp}`}>SP</span>
        {mode === "edit" ? (
          <input
            className={styles.coinInput}
            type="number"
            min={0}
            value={sp}
            onChange={(e) => onChange("sp", Number(e.target.value))}
          />
        ) : (
          <InlineNumber
            value={sp}
            onChange={(v) => onChange("sp", v)}
            className={styles.coinValue}
            min={0}
          />
        )}
      </div>
      <div className={styles.coin}>
        <span className={`${styles.coinLabel} ${styles.cp}`}>CP</span>
        {mode === "edit" ? (
          <input
            className={styles.coinInput}
            type="number"
            min={0}
            value={cp}
            onChange={(e) => onChange("cp", Number(e.target.value))}
          />
        ) : (
          <InlineNumber
            value={cp}
            onChange={(v) => onChange("cp", v)}
            className={styles.coinValue}
            min={0}
          />
        )}
      </div>
    </div>
  );
}