function RecipeList({ recipes, selectedId, onSelect }) {
  return (
    <section className="panel secondary">
      <div className="panel-header">
        <h3>כל המתכונים</h3>
        <span className="badge">{recipes.length}</span>
      </div>

      {recipes.length === 0 ? (
        <p className="muted">עדיין אין מתכונים, לחץ על “מתכון חדש” להתחלה.</p>
      ) : (
        <ul className="recipe-list">
          {recipes.map((r) => (
            <li
              key={r.id}
              className={
                selectedId === r.id ? "recipe-list-item active" : "recipe-list-item"
              }
              onClick={() => onSelect(r)}
            >
              <div className="recipe-list-main">
                <div className="recipe-list-name">{r.name}</div>
                <div className="recipe-list-meta">
                  <span>{r.time_minutes} דק׳</span>
                  <span>{translateMealType(r.meal_type)}</span>
                </div>
              </div>
            </li>
          ))}
        </ul>
      )}
    </section>
  );
}

function translateMealType(type) {
  switch (type) {
    case "breakfast":
      return "בוקר";
    case "lunch":
      return "צהריים";
    case "dinner":
      return "ערב";
    case "snack":
      return "קינוחים";
    default:
      return type;
  }
}

export default RecipeList;