<template>
  <Link :href="newcomersPageLink" :inline="false" class="newcomer-link">
    <Card
      v-if="newcomer && newcomer.users"
      class="newcomer-card-container py-xl"
    >
      <Avatar
        :image="$_getContentImage(newcomer.users.image, 'avatar')"
        size="l"
        class="avatar mb-s"
      />

      <Title tag="h5" class="mb-xs newcomer-name">{{ $_username(newcomer.users) }}</Title>

      <BaseText
        v-if="newcomer.users.subsidiaries"
        :color="$_theme('colorPrimary')"
        class="mb-xs"
      >
        {{ newcomer.users.subsidiaries.title }}
      </BaseText>

      <BaseText
        v-if="newcomer.users.function"
        :color="$_theme('colorTextLight')"
        class="mb-xs newcomer-function"
      >
        {{ newcomer.users.function }}
      </BaseText>

      <BaseText
        v-if="newcomer.users.phone"
        :color="$_theme('colorTextLight')"
        class="mb-xs"
      >
        {{ newcomer.users.phone }}
      </BaseText>
    </Card>
  </Link>
</template>

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

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

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

export default {
  name: 'NewcomerCard',
  components: { Card, Title, BaseText, Avatar, Link },
  props: {
    newcomer: { type: Object }
  },
  computed: {
    newcomersPageLink() {
      return formatHref(
        {
          name: 'NewcomersListingPage'
        },
        this.$_currentLang
      )
    }
  }
}
</script>

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

.newcomer-link {
  @include desktop-only {
    width: 48%;
  }

  .newcomer-card-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;

    .newcomer-function, .newcomer-name {
      text-align: center;
      word-break: break-word;
    }
  }
}
</style>
