<template>
  <div class="users-modal-header-container">
    <Avatar
      :image="$_getContentImage(avatar, 'avatar')"
      :outline="true"
      :outline-color="$_theme('colorLight')"
      size="l"
    />

    <div class="informations">
      <div v-if="username || linkedin" class="name-and-linkedin">
        <Title v-if="username" :dark-mode="true" tag="h2" class="username">
          {{ username }}
        </Title>

        <Link
          v-if="linkedin"
          :href="linkedin"
          :inline="false"
          :hover-decoration-disabled="true"
          :external="true"
          class="linkedin"
        >
          <Icon icon="linkedin" size="l" :color="$_theme('colorLight')" />
        </Link>
      </div>

      <Title v-if="jobTitle" tag="h4" :dark-mode="true" class="job">
        {{ jobTitle }}
      </Title>
    </div>
  </div>
</template>

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

export default {
  name: 'UserModalHeader',
  components: {
    Icon,
    Title,
    Link,
    Avatar
  },
  props: {
    avatar: Object,
    username: String,
    linkedin: String,
    jobTitle: String
  }
}
</script>

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

.users-modal-header-container {
  display: flex;
  align-items: center;
  background: var(--color-primary);
  padding: var(--spacing-xl) 0 var(--spacing-xs) var(--spacing-xxl);

  @include tablet {
    padding-left: var(--spacing-xl);
  }

  @include mobile {
    padding-left: var(--spacing-m);
  }

  .informations {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: var(--spacing-m);

    .name-and-linkedin {
      display: flex;
      align-items: center;

      .linkedin {
        margin-left: var(--spacing-l);
      }
    }
  }
}
</style>
