/* Fuel-type selector — 4 cards */

function FuelSelector({ value, onChange }) {
  const fuels = window.SicosaEngine.FUELS;
  // Order: Diesel, Gasoline 92, Gasoline 95, LPG
  const order = ["diesel", "gasoline-92", "gasoline-95", "lpg"];
  return (
    <div className="fuel-bar">
      {order.map((id) => {
        const f = fuels[id];
        const active = id === value;
        const chipLabel = id === "diesel" ? "DT" : id === "lpg" ? "LPG" : id === "gasoline-92" ? "92" : "95";
        return (
          <button
            key={id}
            type="button"
            className={"fuel-card fuel-card--" + id + (active ? " is-active" : "")}
            onClick={() => onChange(id)}
            aria-pressed={active}
          >
            <span className="fuel-card__chip" style={{ background: f.color }}>
              {chipLabel}
            </span>
            <span className="fuel-card__text">
              <span className="fuel-card__name">{f.label}</span>
              <span className="fuel-card__density">ρ = {f.density.toFixed(3)} kg/L</span>
            </span>
          </button>
        );
      })}
    </div>
  );
}

window.FuelSelector = FuelSelector;