package components

templ dropdownButton(name string) {
	<button
		class="px-2 py-1 border border-gray-300 rounded-lg focus:outline-2
    focus:outline-blue-500 focus:bg-blue-200"
	>
		{ name }
	</button>
}

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-1">
				Meal
			</h3>
			<div class="flex text-xs flex-wrap gap-1">
				@dropdownButton("Breakfast")
				@dropdownButton("Lunch")
				@dropdownButton("Dinner")
				@dropdownButton("Desert")
				@dropdownButton("Snack")
				@dropdownButton("Side")
				@dropdownButton("Other")
			</div>
		</div>
		<div class="w-full border-b border-gray-300 py-2">
			<h3 class="mb-1">
				Cook Time
			</h3>
			<div class="flex text-xs flex-wrap gap-1">
				@dropdownButton("< 15 min")
				@dropdownButton("15 to 30 min")
				@dropdownButton("30 to 60 min")
				@dropdownButton("60 to 120 min")
				@dropdownButton("+120 min")
			</div>
		</div>
		<div class="w-full border-b border-gray-300 py-2">
			<h3 class="mb-1">
				Difficulty
			</h3>
			<div class="flex text-xs flex-wrap gap-1">
				@dropdownButton("Beginner")
				@dropdownButton("Easy")
				@dropdownButton("Intermediate")
				@dropdownButton("Challegening")
				@dropdownButton("Extreme")
			</div>
		</div>
		<div class="w-full border-b border-gray-300 py-2">
			<h3 class="mb-1">
				Serving Size
			</h3>
			<div class="flex text-xs flex-wrap gap-1">
				@dropdownButton("1 to 2")
				@dropdownButton("1 to 4")
				@dropdownButton("4 to 6")
				@dropdownButton("6 to 8")
				@dropdownButton("8+")
			</div>
		</div>
	</div>
}