<template>
  <Link :href="projectPageLink" :inline="false" class="project-card-container">
    <Card>
      <div class="project-details ">
        <BaseText v-if="project.cities" :color="$_theme('colorTextLight')">
          {{ project.cities.title }}
        </BaseText>

        <BaseText
          v-if="project.subsidiaries.data.length"
          :color="$_theme('colorPrimary')"
        >
          {{ project.subsidiaries.data.map(({ title }) => title).join(', ') }}
        </BaseText>
      </div>

      <RatioImageUi
        :src="$_getContentImage(image, 'image-card')"
        class="my-s"
      />

      <Title :html="true" tag="h5" class="mb-s">{{ project.title }}</Title>
    </Card>
  </Link>
</template>

<script>
import Card from '../sub-components/Card'

import RatioImageUi from '@inside-ui/RatioImageUI'

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

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

export default {
  name: 'ProjectCard',
  components: { Card, Title, BaseText, Link, RatioImageUi },
  props: {
    project: { type: Object }
  },
  data() {
    return {
      image: this.project.main_image
    }
  },
  computed: {
    projectPageLink() {
      return formatHref(
        {
          name: 'ProjectPage',
          params: {
            slug: this.project.slug[0]
          }
        },
        this.$_currentLang
      )
    }
  }
}
</script>

<style lang="scss">
.project-card-container {
  width: 31%;

  .home-card-container {
    min-height: 280px;
  }

  .project-details {
    display: flex;
    flex-direction: column;
  }
}
</style>
