// candles.jsx — Vingt-Deux Veilles
// A single candle = a chapter. Lit when read/visited. Current chapter glows brighter.

function Candle({ n, lit, current, onClick, title }) {
  const cls = ["candle", lit && "lit", current && "current"].filter(Boolean).join(" ");
  return (
    <div className={cls} onClick={onClick} title={title || `Chapitre ${n}`}>
      <div className="flame"></div>
      <div className="wick"></div>
      <div className="body"></div>
      <div className="num">{String(n).padStart(2, "0")}</div>
    </div>
  );
}

function CandlesRow({ litUpTo, current, onSelect }) {
  // mini row for chrome (chapters 1..22)
  return (
    <div className="candles-row" aria-label="Avancée du roman, vingt-deux veilles">
      {Array.from({ length: 22 }, (_, i) => i + 1).map((n) => (
        <Candle
          key={n}
          n={n}
          lit={n <= litUpTo}
          current={n === current}
          onClick={() => onSelect && onSelect(n)}
        />
      ))}
    </div>
  );
}

window.Candle = Candle;
window.CandlesRow = CandlesRow;