import type { Character } from "../types";
import { generateAttacks } from "../utils/derived-attacks";
import StatBlock from "./StatBlock";
import AttackBlock from "./AttackBlock";
import styles from "./StatsPanel.module.css";

interface StatsPanelProps {
  character: Character;
  mode: "view" | "edit";
  campaignId: number;
  onStatChange: (characterId: number, statName: string, value: number) => void;
}

export default function StatsPanel({
  character,
  mode,
  campaignId,
  onStatChange,
}: StatsPanelProps) {
  const attacks = generateAttacks(character);

  return (
    <div className={styles.panel}>
      <div className={styles.sectionTitle}>Ability Scores</div>
      <StatBlock
        stats={character.stats}
        onStatChange={(statName, value) =>
          onStatChange(character.id, statName, value)
        }
        mode={mode}
        campaignId={campaignId}
        characterId={character.id}
        characterName={character.name}
        characterColor={character.color}
      />
      <hr className={styles.separator} />
      <AttackBlock
        attacks={attacks}
        campaignId={campaignId}
        characterId={character.id}
        characterName={character.name}
        characterColor={character.color}
        mode={mode}
      />
    </div>
  );
}