<template>
  <div class="l-shadow-full-widget l-rounded l-w-full bg">
    <div class="l-p-5">
      <div class="l-flex l-flex-row">
        <img class="l-rounded-full l-w-6 l-h-6 lg:l-w-8 lg:l-h-8 l-mr-4" :src="review.review_page.logo" />
        <div class="l-flex l-flex-col l-items-start">
          <!-- star rating / time ago -->
          <div class="l-flex l-flex-row l-w-full l-justify-between">
            <StarRating
              :color="theme.rating_stars_color"
              :rating="review.rating"
            />
            <span class="date l-font-medium l-text-xs l-text-gray-600">
              {{ review.date }}
            </span>
          </div>
          <!-- summary of review -->
          <p class="heading l-mt-6 l-text-md l-font-semibold">
            {{ review.heading }}
          </p>
          <p class="body l-mt-3 l-font-normal l-text-sm l-leading-5 l-text-left">
            {{ truncatedText }}
          </p>
          <!-- read more / verified tag -->
          <a class="read-full l-mt-5 l-text-sm l-font-bold l-no-underline" target="_blank" :href="review.url">
            Read Full Review
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup="{ emit }">
import { computed, toRef } from 'vue'
import StarRating from '../StarRating.vue'
import GrayStar from '../../assets/gray_star.svg'

const props = defineProps({
  review: Object,
  theme: Object,
})

const initial = computed(() => props.review?.heading?.charAt(0))

const truncatedText = computed(() => {
  if (!props.review?.review) {
    return ''
  }

  return props.review.review.length < 250 ?
    props.review.review :
    `${props.review.review.substring(0, 250).trimEnd()}...`
})
</script>

<style scoped>
.bg {
  background-color: v-bind(theme.widget_background_color);
}
.body {
  color: v-bind(theme.body_text_color);
}
.heading {
  color: v-bind(theme.heading_text_color);
}
.date {
  color: v-bind(theme.date_text_color);
}
.read-full {
  color: v-bind(theme.read_full_review_text_color);
}
</style>