<script lang="ts">
  import { locale } from '$lib/translations';
  import { AVATAR_TYPE } from '../../type/global';
  import type { IUser } from '../../type/user';

  export let author: IUser;
  export let type: AVATAR_TYPE = AVATAR_TYPE.DEFAULT;
  export let date: string | undefined = undefined;
  export let className: string | undefined = '';

  let createText = '';

  if (date) {
    const createDate = new Date(date);

    const createMonthName = createDate.toLocaleString($locale, { month: 'long' });

    createText = createMonthName + ' ' + createDate.getDate() + ', ' + createDate.getFullYear();
  }
</script>

{#if author}
  <a href={`/${$locale}/author/${author.slug}`} class="author {type} {className}">
    <img src={author.avatar} alt="" class="author__avatar" />
    <div class="author__content">
      <p class="author__name">{author.name}</p>
      {#if !!date}
        <p class="author__date">{createText}</p>
      {:else}
        <p class="author__post">{author.position[$locale]}</p>
      {/if}
    </div>
  </a>
{/if}

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

  .author {
    display: flex;
    align-items: center;
    gap: 12px;

    &__avatar {
      width: 48px;
      min-width: 48px;
      height: 48px;
      border-radius: 100px;
      background: $grey100;
    }

    &__name {
      @include headingS;
    }

    &__post {
      @include defaultS;

      color: $grey150;
    }

    &__date {
      font-size: 12px;
      font-weight: 400;
      line-height: 18px;

      color: $grey150;
    }

    &.small {
      gap: 10px;

      .author__avatar {
        width: 32px;
        min-width: 32px;
        height: 32px;
      }
    }

    &.middle {
      gap: 16px;

      @include breakpoint-down('tabM') {
        gap: 12px;
      }

      @include breakpoint-down('tabS') {
        gap: 10px;
      }

      .author__avatar {
        width: 72px;
        min-width: 72px;
        height: 72px;

        @include breakpoint-down('tabM') {
          width: 48px;
          min-width: 48px;
          height: 48px;
        }

        @include breakpoint-down('tabS') {
          width: 32px;
          min-width: 32px;
          height: 32px;
        }
      }

      .author__name {
        @include headingL;

        @include breakpoint-down('tabM') {
          @include headingS;
        }
      }

      .author__post {
        @include defaultM;

        @include breakpoint-down('tabM') {
          @include defaultS;
        }
      }
    }

    &.big {
      gap: 16px;

      @include breakpoint-down('tabS') {
        gap: 12px;
      }

      .author__avatar {
        width: 96px;
        min-width: 96px;
        height: 96px;

        @include breakpoint-down('deskM') {
          width: 72px;
          min-width: 72px;
          height: 72px;
        }

        @include breakpoint-down('tabS') {
          width: 48px;
          min-width: 48px;
          height: 48px;
        }
      }

      .author__name {
        @include headingL;

        @include breakpoint-down('tabS') {
          @include headingS;
        }
      }

      .author__post {
        @include defaultM;

        @include breakpoint-down('tabS') {
          @include defaultS;
        }
      }
    }
  }
</style>