package components

templ dropdownButton(content, name, value string) {
<label class="inline-block cursor-pointer select-none">
  <input type="checkbox" name={ name } value={ value } class="sr-only peer" />
  <span class="peer-checked:bg-blue-600 peer-checked:text-white peer-checked:border-blue-600
    px-2 py-1 border border-gray-300 rounded-lg">
    { content }
  </span>
</label>
}

templ FilterDropdown() {
<script>
  function toggleDropdown() {
    const menu = document.getElementById("filter-dropdown-menu");
    const button = document.getElementById("filter-dropdown-button");

    if (menu.classList.contains("block")) {
      menu.classList.remove("block");
      menu.classList.add("hidden");
    } else {
      menu.classList.remove("hidden");
      menu.classList.add("block");
    }
  }
</script>
<div id="filter-dropdown-menu" class="hidden w-full p-2 border border-gray-300 my-2 rounded-lg">
  <div class="w-full border-b border-gray-300 py-2">
    <h3 class="mb-2">
      Meal
    </h3>
    <div class="flex text-xs flex-wrap gap-1 gap-y-3">
      @dropdownButton("Breakfast", "meal", "1")
      @dropdownButton("Lunch", "meal", "2")
      @dropdownButton("Dinner", "meal", "4")
      @dropdownButton("Desert", "meal", "8")
      @dropdownButton("Snack", "meal", "16")
      @dropdownButton("Side", "meal", "32")
      @dropdownButton("Other", "meal", "64")
    </div>
  </div>
  <div class="w-full border-b border-gray-300 py-2">
    <h3 class="mb-2">
      Cook Time
    </h3>
    <div class="flex text-xs flex-wrap gap-1 gap-y-3">
      @dropdownButton("< 15 min", "time" , "1")
      @dropdownButton("15 to 30 min", "time" , "2")
      @dropdownButton("30 to 60 min", "time" , "4")
      @dropdownButton("60 to 120 min", "time" , "8")
      @dropdownButton("+120 min", "time", "16")
    </div>
    </div>
    <div class="w-full border-b border-gray-300 py-2">
      <h3 class="mb-2">
        Difficulty
      </h3>
    <div class="flex text-xs flex-wrap gap-1 gap-y-3">
        @dropdownButton("Beginner", "difficulty", "1")
        @dropdownButton("Easy", "difficulty", "2")
        @dropdownButton("Intermediate", "difficulty", "4")
        @dropdownButton("Challenging", "difficulty", "8")
        @dropdownButton("Extreme", "difficulty", "16")
      </div>
    </div>
    <div class="w-full border-b border-gray-300 py-2">
      <h3 class="mb-2">
        Serving Size
      </h3>
      <div class="flex text-xs flex-wrap gap-1 gap-y-3">
        @dropdownButton("1 to 2", "serving", "1")
        @dropdownButton("2 to 4", "serving", "2")
        @dropdownButton("4 to 6", "serving", "4")
        @dropdownButton("6 to 8", "serving", "8")
        @dropdownButton("8+", "serving", "16")
      </div>
    </div>
  </div>
  }