<template>
  <Card class="subsidiaries-news-card-container">
    <div class="subsidiaries-news-card-header mb-s">
      <BaseText :color="$_theme('colorTextLight')" class="mr-xs">
        {{ $_formatDate(published_at, 'L') }}
      </BaseText>

      <div v-for="subsidiary in subsidiaries.data" :key="subsidiary.uuid">
        <BaseText :color="$_theme('colorPrimary')" class="subsidiary-link ml-s">
          {{ subsidiary.title }}
        </BaseText>
      </div>
    </div>

    <Link :href="uri" :external="true" :inline="false">
      <ratio-image-ui :static="true" :src="image_link" />
    </Link>

    <Link :href="uri" :external="true" :inline="false">
      <Title tag="h5" class="my-s">{{ title }}</Title>
    </Link>
  </Card>
</template>

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

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

export default {
  name: 'SubsidiariesNewsCard',
  components: { Card, Title, BaseText, Link },
  props: {
    title: {
      type: String,
      required: true
    },
    published_at: {
      type: Number,
      required: true
    },
    image_link: {
      type: String
    },
    subsidiaries: {
      type: Object
    },
    uri: {
      type: String
    }
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.subsidiaries-news-card-container {
  min-height: 280px;

  @include tablet {
    width: 350px;
    margin: auto !important;
  }

  .subsidiaries-news-card-header {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
