function RecipeDetails({ recipe, onEditClick, onDeleteClick, onShowDeleteModal }) {
  if (!recipe) {
    return (
      <section className="panel placeholder">
        <p>עדיין לא נבחר מתכון. בחר מתכון מהרשימה או צור מתכון חדש.</p>
      </section>
    );
  }

  const handleDelete = () => {
    onShowDeleteModal(recipe.id, recipe.name);
  };

  return (
    <section className="panel recipe-card">
      <header className="recipe-header">
        <div>
          <h2>{recipe.name}</h2>
          <p className="recipe-subtitle">
            {translateMealType(recipe.meal_type)} · {recipe.time_minutes} דקות הכנה
          </p>
        </div>
        <div className="pill-row">
          <span className="pill">⏱ {recipe.time_minutes} דק׳</span>
          <span className="pill">🍽 {translateMealType(recipe.meal_type)}</span>
        </div>
      </header>

      <div className="recipe-body">
        <div className="recipe-column">
          <h3>מצרכים</h3>
          <ul>
            {recipe.ingredients.map((ing, idx) => (
              <li key={idx}>{ing}</li>
            ))}
          </ul>
        </div>

        <div className="recipe-column">
          <h3>שלבים</h3>
          <ol>
            {recipe.steps.map((step, idx) => (
              <li key={idx}>{step}</li>
            ))}
          </ol>
        </div>
      </div>

      {recipe.tags && recipe.tags.length > 0 && (
        <footer className="tags">
          {recipe.tags.map((tag, idx) => (
            <span key={idx} className="tag">
              #{tag}
            </span>
          ))}
        </footer>
      )}

      <div className="recipe-actions">
        <button className="btn ghost small" onClick={() => onEditClick(recipe)}>
          ✏️ ערוך
        </button>
        <button className="btn ghost small" onClick={handleDelete}>
          🗑 מחק
        </button>
      </div>
    </section>
  );
}

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

export default RecipeDetails;