<template>
      <!-- comments -->
      <div
      class="flex items-center gap-[3vw] md:gap-[0.7vw] mt-[12vw] md:mt-[6.3vw] mb-[6vw] md:mb-[2.1vw]"
    >
      <svg
        class="w-[1.538vw] md:w-[0.521vw] h-[8.462vw] md:h-[2.76vw]"
        viewBox="0 0 10 53"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
          fill="#0D3F40"
        />
      </svg>
      <span class="text-[4.544vw] md:text-[1.481vw] font-semibold"
        >نظرات</span
      >
    </div>

    <!-- comment 1 -->
    <div
    v-for="item in props.props" :key="item.id"
      class="mt-[1vw] relative bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] flex justify-between p-[4vw] md:p-[1.55vw]"
    >
      <img
        src="/public/images/client1.png"
        alt="profile"
        class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
      />

      <div class="ps-[3vw] md:ps-[1vw] w-full">
        <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
          علی مصلحی
        </p>
        <div class="thin">
          <p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
            1402/09/14
          </p>
          <p
            class="w-[98%] text-[3.19vw] md:text-[0.833vw] text-[#383E43] leading-[4.785vw] md:leading-[1.25vw] mt-[2vw] md:mt-[0.5vw]"
          >
          {{ item.text }}

          </p>
        </div>
      </div>

      <svg
        class="absolute md:left-[2vw] left-[5vw] h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M7.12988 18.3101H15.1299C17.8899 18.3101 20.1299 16.0701 20.1299 13.3101C20.1299 10.5501 17.8899 8.31006 15.1299 8.31006H4.12988"
          stroke="#383E43"
          stroke-width="1.5"
          stroke-miterlimit="10"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M6.43012 10.8099L3.87012 8.24994L6.43012 5.68994"
          stroke="#383E43"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>

    <!-- comment 2 -->
    <!-- <div
      class="mt-[4vw] md:mt-[1vw] bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw]"
    >
      <div class="flex justify-between relative p-[4vw] md:p-[1.55vw]">
        <img
          src="/public/images/client2.png"
          alt="profile"
          class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
        />

        <div class="ps-[3vw] md:ps-[1vw]">
          <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
            علی مصلحی
          </p>
          <div class="thin">
            <p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
              1402/09/14
            </p>
            <p
              class="w-[98%] text-[3.19vw] md:text-[0.833vw] text-[#383E43] leading-[4.785vw] md:leading-[1.25vw] mt-[2vw] md:mt-[0.5vw]"
            >
              لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
              استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و
              مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی
              تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
              کاربردی می باشد
            </p>
          </div>
        </div>

        <svg
          class="absolute md:left-[2vw] left-[5vw] h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M7.12988 18.3101H15.1299C17.8899 18.3101 20.1299 16.0701 20.1299 13.3101C20.1299 10.5501 17.8899 8.31006 15.1299 8.31006H4.12988"
            stroke="#383E43"
            stroke-width="1.5"
            stroke-miterlimit="10"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M6.43012 10.8099L3.87012 8.24994L6.43012 5.68994"
            stroke="#383E43"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>

      <div
        class="relative bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] flex justify-between ps-[16vw] md:ps-[6vw] p-[2vw] md:p-[1.55vw]"
      >
        <img
          src="/public/images/client3.png"
          alt="profile"
          class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
        />

        <div class="ps-[3vw] md:ps-[1vw]">
          <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
            علی مصلحی
          </p>
          <div class="thin">
            <p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
              1402/09/14
            </p>
            <p
              class="w-[98%] text-[3.19vw] md:text-[0.833vw] text-[#383E43] leading-[4.785vw] md:leading-[1.25vw] mt-[2vw] md:mt-[0.5vw]"
            >
              لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
              استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و
              مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی
              تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
              کاربردی می باشد
            </p>
          </div>
        </div>

        <svg
          class="absolute md:left-[2vw] left-[5vw] h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M7.12988 18.3101H15.1299C17.8899 18.3101 20.1299 16.0701 20.1299 13.3101C20.1299 10.5501 17.8899 8.31006 15.1299 8.31006H4.12988"
            stroke="#383E43"
            stroke-width="1.5"
            stroke-miterlimit="10"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M6.43012 10.8099L3.87012 8.24994L6.43012 5.68994"
            stroke="#383E43"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>
    </div> -->
</template>

<script setup>
const props = defineProps(['props'])

</script>