/* FoodCard — expandable Indian-food tile with benefit chips */
(function () {
  const { useState } = React;

  function FoodCard({ food, eaten, onToggle }) {
    const Icon = window.Icon;
    const BENEFIT_META = window.PulseFloor.BENEFIT_META;
    const [open, setOpen] = useState(false);
    return (
      <div className={`food-card ${eaten ? "eaten" : ""}`}>
        <div className="food-head" onClick={() => setOpen(!open)}>
          <div className="food-thumb" aria-hidden>
            <span className="food-thumb-letter">{food.name[0]}</span>
          </div>
          <div style={{flex: 1, minWidth: 0}}>
            <div className="food-name-row">
              <div className="food-name">{food.name}</div>
              <div className="food-hindi">{food.hindi}</div>
            </div>
            <div className="food-chips">
              {food.benefits.map((b) => {
                const m = BENEFIT_META[b];
                return (
                  <span key={b} className="food-chip" style={{"--c": m.color}} title={m.label}>
                    {m.label}
                  </span>
                );
              })}
            </div>
          </div>
          <button
            className={`check-btn ${eaten ? "checked" : ""}`}
            onClick={(e) => { e.stopPropagation(); onToggle(); }}
            title={eaten ? "Mark not eaten" : "Mark eaten"}
          >
            <Icon.Check />
          </button>
        </div>
        {open && (
          <div className="food-how">
            <div className="vm-section-label" style={{marginBottom: 6}}>How to eat</div>
            {food.how}
          </div>
        )}
      </div>
    );
  }

  window.FoodCard = FoodCard;
})();