<template>
  <Link
    v-bind="{ ...getAttrs($attrs), ...$props }"
    :inline="false"
    :href="formattedLink"
  >
    <div class="offers-resume">
      <img
        :src="
          $_getContentImage(
            image || offers_categories?.data?.[0]?.image,
            'image-card'
          )
        "
        :alt="title"
        class="offer-image mr-m"
      />

      <div class="infos-block">
        <div class="date-categories mb-s">
          <BaseText :lighter="true" class="mr-s">
            {{ $_formatDate(published_at) }}
          </BaseText>

          <div class="categories">
            <BaseText
              v-for="cat in offers_categories.data"
              :key="cat.uuid"
              :color="cat.color"
              class="ml-s"
            >
              {{ cat.title }}
            </BaseText>
          </div>
        </div>

        <Title tag="h4">{{ title }}</Title>
      </div>
    </div>
  </Link>
</template>

<script>
import { BaseText, Title } from 'inside-collection/atoms'
import { Link } from 'inside-collection/components'

import { getAttrs } from '@inside-library/helpers/Attrs'

export default {
  name: 'OfferResume',
  components: { BaseText, Title, Link },
  props: {
    title: {
      type: String
    },
    published_at: {
      type: Number
    },
    image: {
      type: Object
    },
    offers_categories: {
      type: Object
    },
    slug: {
      type: Array,
      required: true
    }
  },
  computed: {
    formattedLink() {
      return { name: 'OfferPage', params: { slug: this.slug[0] } }
    }
  },
  methods: {
    getAttrs
  }
}
</script>

<style lang="scss">
.offers-resume {
  display: flex;

  .offer-image {
    max-width: 100px;
    height: 100%;
  }

  .infos-block {
    display: flex;
    flex-direction: column;

    .date-categories {
      display: flex;
    }
  }
}
</style>
