<template>
  <div
    class="suggestions px-[1vw] md:px-[1.042vw] mt-[12vw] md:mt-[3.3vw] md:bg-white rounded-[0.781vw] flex flex-col gap-[0.417vw] pb-[1.667vw]"
  >
    <div
      class="ps-[1.5vw] border-b-[2px] mt-[2vw] flex gap-x-[1vw] items-center text-[0.833vw] text-[#878787]"
    >
      <span
        class="text-[0.741vw] text-[#383E43] flex items-center gap-[0.5vw] pb-[0.681vw]"
      >
        <svg
          width="24"
          height="25"
          viewBox="0 0 24 25"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M3 7.5H21"
            stroke="#383E43"
            stroke-width="1.5"
            stroke-linecap="round"
          />
          <path
            d="M6 12.5H18"
            stroke="#383E43"
            stroke-width="1.5"
            stroke-linecap="round"
          />
          <path
            d="M10 17.5H14"
            stroke="#383E43"
            stroke-width="1.5"
            stroke-linecap="round"
          />
        </svg>
        <span class="hidden md:block"> مرتب سازی بر اساس: </span>
        <span
          class="block md:hidden text-[3.59vw] py-[2vw] ps-[1vw]"
          @click="openSortOptions"
          >مرتب سازی</span
        >
      </span>
      <ul class="gap-x-[1vw] items-center hidden md:flex">
        <li
          class="pb-[0.681vw] text-primaryGreen border-b-[2px] border-primaryGreen"
        >
          همه دوره ها
        </li>
        <li class="pb-[0.681vw]">دوره های رایگان</li>
        <li class="pb-[0.681vw]">ارزان ترین</li>
        <li class="pb-[0.681vw]">گران ترین</li>
      </ul>
    </div>
    <div
      class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
    >
    <Card />
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
    </div>
  </div>
</template>

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

</script>