import type { Stat } from "../types";
import { getModifier, formatModifier } from "../utils/modifiers";
import styles from "./StatBlock.module.css";

const STAT_ORDER = ["STR", "DEX", "CON", "INT", "WIS", "CHA"];

interface StatBlockProps {
  stats: Stat[];
  onStatChange: (statName: string, newValue: number) => void;
  mode?: "view" | "edit";
}

export default function StatBlock({
  stats,
  onStatChange,
  mode = "view",
}: StatBlockProps) {
  const statMap = new Map(stats.map((s) => [s.stat_name, s.value]));

  return (
    <div className={styles.statGrid}>
      {STAT_ORDER.map((name) => {
        const value = statMap.get(name) ?? 10;
        const mod = getModifier(value);
        return (
          <div key={name} className={styles.stat}>
            <span className={styles.statName}>{name}</span>
            <div className={styles.statRow}>
              {mode === "edit" && (
                <button
                  className={styles.btn}
                  onClick={() => onStatChange(name, value - 1)}
                >
                  −
                </button>
              )}
              <span className={styles.modifier}>{formatModifier(mod)}</span>
              {mode === "edit" && (
                <button
                  className={styles.btn}
                  onClick={() => onStatChange(name, value + 1)}
                >
                  +
                </button>
              )}
            </div>
            <span className={styles.score}>{value}</span>
          </div>
        );
      })}
    </div>
  );
}