function RecipeFilters({
  recipes,
  searchQuery,
  onSearchChange,
  filterMealType,
  onMealTypeChange,
  filterMaxTime,
  onMaxTimeChange,
  filterTags,
  onTagsChange,
}) {
  // Extract unique tags from all recipes
  const allTags = Array.from(
    new Set(recipes.flatMap((recipe) => recipe.tags || []))
  ).sort();

  // Extract unique meal types from recipes
  const mealTypes = Array.from(new Set(recipes.map((r) => r.meal_type))).sort();

  // Extract max time for slider
  const maxTimeInRecipes = Math.max(...recipes.map((r) => r.time_minutes), 0);

  const handleTagToggle = (tag) => {
    if (filterTags.includes(tag)) {
      onTagsChange(filterTags.filter((t) => t !== tag));
    } else {
      onTagsChange([...filterTags, tag]);
    }
  };

  const clearAllFilters = () => {
    onSearchChange("");
    onMealTypeChange("");
    onMaxTimeChange("");
    onTagsChange([]);
  };

  const hasActiveFilters = searchQuery || filterMealType || filterMaxTime || filterTags.length > 0;

  return (
    <section className="panel search-filter-panel">
      <div className="panel-header">
        <h3>חיפוש וסינון</h3>
        {hasActiveFilters && (
          <button className="btn ghost small" onClick={clearAllFilters}>
            נקה הכל
          </button>
        )}
      </div>

      {/* Search Box */}
      <div className="search-box-wrapper">
        <input
          type="text"
          className="search-box"
          placeholder="חיפוש לפי שם מתכון..."
          value={searchQuery}
          onChange={(e) => onSearchChange(e.target.value)}
        />
        {searchQuery && (
          <button
            className="search-clear"
            onClick={() => onSearchChange("")}
            title="נקה חיפוש"
          >
            ✕
          </button>
        )}
      </div>

      {/* Filters Grid */}
      <div className="filters-grid">
        {/* Meal Type Filter */}
        {mealTypes.length > 0 && (
          <div className="filter-group">
            <label className="filter-label">סוג ארוחה</label>
            <div className="filter-options">
              <button
                className={`filter-btn ${filterMealType === "" ? "active" : ""}`}
                onClick={() => onMealTypeChange("")}
              >
                הכל
              </button>
              {mealTypes.map((type) => (
                <button
                  key={type}
                  className={`filter-btn ${filterMealType === type ? "active" : ""}`}
                  onClick={() => onMealTypeChange(type)}
                >
                  {translateMealType(type)}
                </button>
              ))}
            </div>
          </div>
        )}

        {/* Prep Time Filter */}
        {maxTimeInRecipes > 0 && (
          <div className="filter-group">
            <label className="filter-label">
              זמן הכנה {filterMaxTime ? `עד ${filterMaxTime} דקות` : ""}
            </label>
            <div className="time-filter-wrapper">
              <input
                type="range"
                min="0"
                max={maxTimeInRecipes}
                value={filterMaxTime || 0}
                onChange={(e) => onMaxTimeChange(e.target.value === "0" ? "" : e.target.value)}
                className="time-slider"
              />
              <div className="time-labels">
                <span>0</span>
                <span>{maxTimeInRecipes}</span>
              </div>
            </div>
          </div>
        )}

        {/* Tags Filter */}
        {allTags.length > 0 && (
          <div className="filter-group">
            <label className="filter-label">תגיות</label>
            <div className="tag-filter-wrapper">
              {allTags.map((tag) => (
                <button
                  key={tag}
                  className={`tag-filter-btn ${filterTags.includes(tag) ? "active" : ""}`}
                  onClick={() => handleTagToggle(tag)}
                >
                  {tag}
                </button>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

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

export default RecipeFilters;
