<template>
  <div
    class="w-full items-start flex flex-col mdlg:!py-5 mdlg:!px-5 px-2 py-2 space-y-2 border-[1px] border-gray-200 rounded"
  >
    <div class="flex flex-row items-center space-x-2">
      <ts-avatar :photoUrl="'/images/review_img.png'" :size="'33'" />
      <div class="flex flex-col space-y-[1px]">
        <div class="flex flex-row items-center space-x-2">
          <ts-normal-text :color="'text-paragraphTextLight'">
            Amanda Johnsons
          </ts-normal-text>
          <span class="h-[4px] w-[4px] bg-paragraphTextLight rounded-full"></span>
          <ts-normal-text :color="'text-paragraphTextLight'"> 2h </ts-normal-text>
        </div>
        <ts-ratings />
      </div>
    </div>
    <ts-paragraph-text :customClass="'text-left'">
      My son got a 95% on his chem final thanks to Steven! Thank you!!!!!
    </ts-paragraph-text>
  </div>
</template>
<script lang="ts">
import TsNormalText from "../TsTypography/normalText.vue";
import TsRatings from "../TsRatings/index.vue";
import TsAvatar from "../TsAvatar/index.vue";
import TsParagraphText from "../TsTypography/paragraphText.vue";

export default {
  components: {
    TsNormalText,
    TsRatings,
    TsAvatar,
    TsParagraphText,
  },
  props: {},
  name: "TsReviewCard",
};
</script>
