spelljammer-ships/web/src/components/dashboard/VitalsSection.tsx

import NumericStepper from '../ui/NumericStepper';
import type { Ship } from '../../types/ship';

interface Props {
  ship: Ship;
  onUpdate: (patch: Partial<Ship>) => void;
  editing: boolean;
}

export default function VitalsSection({ ship, onUpdate, editing }: Props) {
  return (
    <section className="dashboard-section">
      <h3 className="section-title">Vitals</h3>
      {editing ? (
        <div className="stat-grid">
          <NumericStepper
            label="Hull"
            value={ship.hull_current}
            max={ship.hull_max}
            onChange={(v) => onUpdate({ hull_current: v })}
          />
          <NumericStepper
            label="Hull Max"
            value={ship.hull_max}
            min={ship.hull_current}
            onChange={(v) => onUpdate({ hull_max: v })}
          />
          <NumericStepper
            label="Armor"
            value={ship.armor_current}
            max={ship.armor_max}
            onChange={(v) => onUpdate({ armor_current: v })}
          />
          <NumericStepper
            label="Armor Max"
            value={ship.armor_max}
            min={ship.armor_current}
            onChange={(v) => onUpdate({ armor_max: v })}
          />
          <NumericStepper
            label="AC"
            value={ship.ac}
            onChange={(v) => onUpdate({ ac: v })}
          />
          <NumericStepper
            label="Con Save"
            value={ship.con_save ?? 0}
            onChange={(v) => onUpdate({ con_save: v })}
          />
        </div>
      ) : (
        <div className="stat-grid-readonly">
          <div className="stat-ro">
            <span className="stat-ro-label">Hull</span>
            <span className="stat-ro-value">{ship.hull_current}/{ship.hull_max}</span>
          </div>
          <div className="stat-ro">
            <span className="stat-ro-label">AC</span>
            <span className="stat-ro-value">{ship.ac}</span>
          </div>
          <div className="stat-ro">
            <span className="stat-ro-label">Armor</span>
            <span className="stat-ro-value">{ship.armor_current}/{ship.armor_max}</span>
          </div>
          <div className="stat-ro">
            <span className="stat-ro-label">Con</span>
            <span className="stat-ro-value">{ship.con_save != null ? `+${ship.con_save}` : '—'}</span>
          </div>
        </div>
      )}
    </section>
  );
}