import styles from "./HpBar.module.css";

interface HpBarProps {
  current: number;
  max: number;
  onChange: (current: number) => void;
}

export default function HpBar({ current, max, onChange }: HpBarProps) {
  const ratio = max > 0 ? current / max : 1;
  const colorClass =
    ratio <= 0.25 ? styles.critical : ratio <= 0.5 ? styles.hurt : "";

  return (
    <div className={styles.hpBar}>
      <span className={styles.label}>HP</span>
      <button className={styles.btn} onClick={() => onChange(current - 1)}>
        −
      </button>
      <span className={styles.values}>
        <span className={`${styles.current} ${colorClass}`}>{current}</span>
        <span className={styles.slash}>/</span>
        <span className={styles.max}>{max}</span>
      </span>
      <button className={styles.btn} onClick={() => onChange(current + 1)}>
        +
      </button>
    </div>
  );
}
