<template>
  <div class="category">
    <h3
      v-if="$route.path === '/'"
      class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[4.103vw] md:mt-[3.49vw] ms-0 md:ms-[1.563vw]"
    >
      انتخاب گسترده ای از دوره ها
    </h3>
    <div
      class="flex flex-col md:flex-row items-start justify-between md:items-center"
      v-else
    >
      <h3
        class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[6vw] md:mt-[4.103vw] md:mt-[3.2vw] ms-0 md:ms-[1.563vw]"
      >
        حرفه آینده را کشف کنید
      </h3>
      <span
        class="mt-[3vw] md:mt-[3vw] text-[#878787] text-[3.59vw] md:text-[0.833vw] md:me-[1.563vw]"
        >42 ویدیو آموزشی</span
      >
    </div>
    <p
      class="hidden md:block ms-0 md:ms-[1.563vw] text-[#878787] text-[3.59vw] md:text-[1.055vw] mt-[2vw] md:mt-[1vw]"
    >
      انتخاب از بین بیش از 210000 دوره آنلاین ویدیویی با افزودنی های جدید که هر
      ماه منتشر می شود
    </p>
    <div
      v-show="$route.path === '/courses'"
      class="mt-[5vw] md:mt-[2.3vw] mb-[3.2vw] relative"
    >
      <svg
        class="absolute top-[3vw] md:top-[0.9vw] right-[4.5vw] md:right-[2.5vw] h-[5.128vw] md:h-[1.458vw] w-[5.128vw] md:w-[1.458vw]"
        viewBox="0 0 28 28"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M13.4168 24.5C19.538 24.5 24.5002 19.5378 24.5002 13.4167C24.5002 7.29552 19.538 2.33334 13.4168 2.33334C7.29567 2.33334 2.3335 7.29552 2.3335 13.4167C2.3335 19.5378 7.29567 24.5 13.4168 24.5Z"
          stroke="#878787"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M25.6668 25.6667L23.3335 23.3333"
          stroke="#878787"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>

      <input
        class="w-[100%] md:w-[45vw] h-[10.769vw] md:h-[3.333vw] text-[2.836vw] md:text-[0.741vw] text-[#878787] rounded-[2.564vw] md:rounded-[0.781vw] ps-[12vw] md:ps-[3vw] md:ms-[1.563vw] shadow-sm"
        type="text"
        placeholder="نام آموزش ، دوره و ... را وارد کنید"
      />
    </div>
    <div class="flexBox px-0 md:px-[1vw] h-[2.813vw] mt-[10vw] md:mt-[2.5vw]">
      <svg
        @click="this.$refs.carousel.next()"
        class="hidden md:block h-[1.563vw] w-[1.563vw] cursor-pointer"
        viewBox="0 0 30 30"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          class="fill-[#878787] hover:fill-[#383E43]"
          d="M18.9996 13.1125L16.5371 10.65L12.5246 6.63753C11.6746 5.80003 10.2246 6.40003 10.2246 7.60003V15.3875V22.4C10.2246 23.6 11.6746 24.2 12.5246 23.35L18.9996 16.875C20.0371 15.85 20.0371 14.15 18.9996 13.1125Z"
        />
      </svg>

      <Carousel
        :items-to-show="8.3"
        ref="carousel"
        :breakpoints="breakpoints"
        :wrapAround="true"
        class="w-full md:w-[95%]"
      >
        <Slide v-for="slide in categories" :key="slide">
          <div class="categoriesOption">{{ slide }}</div>
        </Slide>
      </Carousel>

      <svg
        @click="this.$refs.carousel.prev()"
        class="hidden md:block h-[1.563vw] w-[1.563vw] cursor-pointer"
        viewBox="0 0 30 30"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.4748 6.65005L13.4623 10.6626L10.9998 13.1126C9.9623 14.1501 9.9623 15.8376 10.9998 16.8751L17.4748 23.3501C18.3248 24.2001 19.7748 23.5876 19.7748 22.4001V15.3876V7.60005C19.7748 6.40005 18.3248 5.80005 17.4748 6.65005Z"
          class="fill-[#878787] hover:fill-[#383E43]"
        />
      </svg>
    </div>
  </div>
</template>
<script setup>
const categories = [
  "Python",
  "JavaScript",
  "C#",
  "php",
  "C++",
  "Ruby",
  "Node.js",
  "php",
  "C++",
  "Ruby",
  "Node.js",
];
const breakpoints = {
  // 700px and up
  300: {
    itemsToShow: 3.5,
    snapAlign: "end",
  },
  700: {
    itemsToShow: 7.3,
    snapAlign: "end",
  },
  // 1024 and up
  1024: {
    itemsToShow: 8.3,
    snapAlign: "end",
  },
};
</script>

<style scoped>
</style>