// CockpitHeader.tsx — Dashboard résumé toujours visible en haut du cockpit

import { useGameStore } from "../store/useGameStore";
import { formatNumber } from "../utils/formatNumber";
import { getClickGain } from "../core/economy";

export function CockpitHeader() {
  const productionPerSecond = useGameStore((s) => s.productionPerSecond);
  const state = useGameStore((s) => s.state);
  const { prestigeMultiplier, ancestralDna, prestigeCount } = state;
  const clickGain = getClickGain(state);

  return (
    <div className="gp gp-cockpit-header">
      <div className="gp-stat">
        <span className="gp-label">Prod/s</span>
        <span className="gp-value gp-accent-green">
          {formatNumber(productionPerSecond)}
        </span>
      </div>
      <div className="gp-stat">
        <span className="gp-label">Ponte</span>
        <span className="gp-value">{formatNumber(clickGain)}</span>
      </div>
      <div className="gp-stat">
        <span className="gp-label">Mult</span>
        <span className="gp-value">x{prestigeMultiplier.toFixed(1)}</span>
      </div>
      <div className="gp-stat">
        <span className="gp-label">ADN</span>
        <span className="gp-value gp-accent-purple">{ancestralDna}</span>
      </div>
      <div className="gp-stat">
        <span className="gp-label">Gén.</span>
        <span className="gp-value">{prestigeCount}</span>
      </div>
    </div>
  );
}