<template>
  <a :href="item.url" rel="noopener nofollow" target="_blank">
    <div
      class="BlkCard flex flex-col h-[435px] p-32 bg-white rounded-24 shadow-[0_40px_40px_rgba(4,_4,_4,_0.02)] transition-[box-shadow_0.3s] laptop:h-[396px] tablet:h-auto tablet:min-h-[314px] mobile:p-24">
      <div class="logo w-128 h-64 mb-32 tablet:mb-24">
        <img :src="item.logo" height="64" width="124" />
      </div>
      <div
        class="description overflow-hidden text-gray-1100 font-regular text-16 tablet:mb-32">
        {{ item.description }}
      </div>
      <div
        class="read-full flex gap-12 items-center mt-auto text-gray-900 font-regular text-14 transition-[color_0.3s_ease-out]">
        <span>Read Full Review</span>
        <img
          :src="buttonArrowIcon"
          width="25"
          height="14"
          class="iconArrow"
          loading="lazy"
          alt="card-icon"
        />
      </div>
    </div>
  </a>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { IFeatured } from '@/components/pages/index/Featured/Featured.types';
import buttonArrowIcon from '@/assets/img/static-icons/arrow/arrow-long-orange.svg?url';

export default defineComponent({
  props: {
    item: {
      type: Object as PropType<IFeatured.Item>,
      required: true,
    },
  },
  data: () => ({
    buttonArrowIcon,
  }),
});
</script>

<style lang="scss">
.BlkCard {
  &:hover {
    box-shadow: 0 4px 50px rgba(255, 95, 33, 0.1),
      0 40px 40px rgba(4, 4, 4, 0.02);

    .iconArrow {
      filter: grayscale(0%) opacity(100%);
    }
  }

  .iconArrow {
    filter: grayscale(100%) opacity(60%);
  }
}

.description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
}

.read-full {
  .card:hover & {
    color: #ff5f21;
  }
}
</style>
