<template>
  <div
    id="filters"
    class="text-[#333333] rounded-t-[4.103vw] p-[5vw] flex flex-col fixed bg-white bottom-0 left-0 z-[1000] h-[80.769vw] translate-y-[80.769vw] duration-500 w-[100vw]"
  >
    <div class="flex items-center justify-between w-full">
      <span class="text-[3.59vw]">مرتب سازی بر اساس</span>
      <svg
        @click="closeSortOptions"
        class="w-[5.641vw] h-[5.641vw]"
        viewBox="0 0 22 22"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M6.41663 6.41675L15.5833 15.5834M6.41663 15.5834L15.5833 6.41675"
          stroke="#878787"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>

    <ul class="mt-[4vw] text-[3.19vw] px-[2vw]">
      <li class="border-b py-[4vw] flex justify-between items-center">
        <span>
            همه ی دوره ها
        </span>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20 7L10 17L5 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
    </li>
      <li class="border-b py-[4vw]">دوره های رایگان</li>
      <li class="border-b py-[4vw]">ارزانترین</li>
      <li class="py-[4vw]">گرانترین</li>
    </ul>
  </div>
</template>

<script setup>
const closeSortOptions = () => {
  if (process.client) {
    document.getElementById("brightnessFilter").style.filter = "none";
    document.getElementById("brightnessFilter").style.backdropFilter = "none";
    document.getElementById("filters").classList.add("translate-y-[80.769vw]");
    document
      .getElementsByTagName("html")[0]
      .classList.remove("overflow-hidden");
  }
};

</script>