// MenuItem.jsx — dish card
const DISH_IMAGES = {
  'quesadilla': 'assets/menu/quesadilla.jpg',
  'blt': 'assets/menu/blt.jpg',
  'cuban': 'assets/menu/cuban.jpg',
  'egg': 'assets/menu/egg-cheese.jpg',
  'meat': 'assets/menu/meat-egg-cheese.jpg',
  'cubanito': 'assets/menu/cubanito.jpg',
  'fries': 'assets/menu/fries.jpg',
  'ham': 'assets/menu/ham.jpg',
  'turkey': 'assets/menu/turkey.jpg',
  'chicken': 'assets/menu/chicken.jpg',
  'pernil': 'assets/menu/pernil.jpg',
  'loaf': 'assets/menu/loaf.jpg',
  'snapple': 'assets/menu/snapple.jpg',
  'water': 'assets/menu/water.jpg',
  'soda': 'assets/menu/soda.jpg',
  'coffee': 'assets/menu/coffee.jpg',

};

const MenuItem = ({ name, desc, price, half, tags = [], dish, onItemClick }) => {
  const initials = name.split(' ').map(w => w[0]).slice(0, 2).join('');
  const img = DISH_IMAGES[dish];

  const handleClick = () => {
    if (onItemClick) onItemClick({ name, desc, price, half, tags, dish, img });
  };

  return (
    <article
      className="psd-menu-item psd-menu-item--clickable"
      onClick={handleClick}
      role="button"
      tabIndex={0}
      onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick(); } }}
    >
      <div className="psd-menu-thumb" data-dish={dish} aria-hidden="true">
        {img
          ? <img src={img} alt="" className="psd-menu-thumb-img" loading="lazy" decoding="async" />
          : <span>{initials}</span>
        }
      </div>
      <div className="psd-menu-body">
        <div className="psd-menu-top">
          <h3 className="psd-menu-name">{name}</h3>
          {(half || price) && (
            <div className="psd-menu-prices">
              {half && <span className="psd-menu-half">Half ${half}</span>}
              {price && <span className="psd-menu-price">${price}</span>}
            </div>
          )}
        </div>
        {desc && <p className="psd-menu-desc">{desc}</p>}
        {tags.length > 0 && (
          <div className="psd-menu-tags">
            {tags.map(t => <span key={t} className="psd-menu-tag">{t}</span>)}
          </div>
        )}
      </div>
    </article>
  );
};

window.MenuItem = MenuItem;