<script lang="ts">
  import type { IPost } from '$type/post';
  import { localeLink, t } from '$lib/translations';

  export let className = '';

  export let data: IPost;
</script>

<div class="author {className}">
  <div class="author__user">
    <img
      alt={$t('blog.imageWrittenBy', { values: { name: data.authorData.name } })}
      class="author__userImage"
      loading="lazy"
      src={data.authorData.avatar.thumbnail}
    />
    <div class="author__userContent">
      <div class="author__userText">{$t('Written by:')}</div>
      <a href="{localeLink()}/author/{data.authorData.slug}" class="author__userName">{data.authorData.name}</a>
      <div class="author__userPost">{data.authorData.position}</div>
    </div>
  </div>
  <div class="author__desc">{data.authorData.description}</div>
</div>

<style lang="scss">
  @import 'src/scss/media';
  @import 'src/scss/mixins';
  @import 'src/scss/variables';

  .author {
    display: flex;
    justify-content: space-between;

    @include breakpoint-down('deskS') {
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    &__user {
      display: flex;
      align-items: flex-start;
      gap: 24px;

      @include breakpoint-down('deskS') {
        gap: 16px;
        margin-bottom: 8px;
      }
    }

    &__userContent {
      @include breakpoint-down('deskS') {
        min-width: 123px;
      }
    }

    &__userImage {
      width: 54px;
      min-width: 54px;
      height: 54px;
      border-radius: 100%;
    }

    &__userText {
      @include xSmallDefault;

      color: $techBlueSecondary;

      @include breakpoint-down('deskS') {
        margin-bottom: 4px;
      }
    }

    &__userName {
      @include smallCTA;

      text-decoration: none;
      color: inherit;

      &:hover {
        text-decoration: underline;
      }
    }

    &__userPost {
      @include xSmallDefault;
    }

    &__desc {
      @include smallDefault;

      color: $techBlueSecondary;
      width: 100%;
      max-width: 256px;
      position: relative;

      @include breakpoint-down('deskS') {
        text-align: center;
      }

      &:after {
        content: '';
        position: absolute;
        left: -15px;
        top: 0;
        width: 1px;
        height: 77%;
        background: black;

        @include breakpoint-down('deskL') {
          height: 64px;
        }

        @include breakpoint-down('deskS') {
          display: none;
        }
      }
    }
  }
</style>