<template>
  <Link :href="formattedLink" :inline="false" class="project-item">
    <Container
      :border="true"
      :background="false"
      class="project-item-container"
    >
      <component-listing
        v-if="subsidiaries && subsidiaries.data.length"
        :id="`subsidiaries-tags-listing-${slug}`"
        :static-data="subsidiaries.data"
        :pagination="false"
        :use-grid="false"
        direction="horizontal"
        class="subsidiaries-tags-listing mb-s"
      >
        <template #default="{item}">
          <BaseText :color="$_theme('colorPrimary')" class="mr-xs">
            {{ item.title.toUpperCase() }}
          </BaseText>
        </template>
      </component-listing>

      <ratio-image-ui
        :src="$_getContentImage(main_image, 'image-card')"
        class="mb-s"
      />

      <Title tag="h5" class="title">
        {{ title }}
      </Title>

      <BaseText v-if="cities" class="locations">
        {{ cities.title }}
      </BaseText>
    </Container>
  </Link>
</template>

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

import { formatHref } from '@inside-library/helpers/Langs'

export default {
  name: 'ProjectItemCustoms',
  components: { Container, Title, BaseText, Link },
  props: {
    title: {
      type: String,
      required: true
    },
    main_image: {
      type: Object
    },
    subsidiaries: {
      type: Object
    },
    cities: {
      type: Object
    },
    slug: {
      type: Array,
      required: true
    }
  },
  computed: {
    formattedLink() {
      return formatHref(
        {
          name: 'ProjectPage',
          params: {
            slug: this.slug[0]
          }
        },
        this.$_currentLang
      )
    }
  }
}
</script>

<style lang="scss">
.project-item-container {
  min-height: 300px;
  min-width: 250px;

  .title {
    margin-bottom: var(--spacing-xs);
  }
}
</style>
