<script lang="ts">
  import Author from './Author.svelte';
  import type { IUser } from '../../type/user';
  import { t } from '$lib/translations';

  export let authors: IUser[];
</script>

<div class="top-author">
  <p class="top-author__title">{$t('Top authors')}</p>
  <div class="top-author__list">
    {#each authors as author}
      <div class="top-author__item">
        <Author {author} />
      </div>
    {/each}
  </div>
</div>

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

  .top-author {
    border: 1px solid $grey50;
    background: $white;
    padding: 24px;
    border-radius: 16px;

    &__title {
      @include headingL;

      margin-bottom: 16px;

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

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

    &__list {
      display: flex;
      flex-direction: column;
      gap: 16px;

      @include breakpoint-down('deskS') {
        flex-direction: unset;
        flex-wrap: wrap;
        column-gap: 0;
      }

      @include breakpoint-down('tabS') {
        flex-direction: column;
      }
    }

    &__item {
      border-bottom: thin solid $grey50;
      padding-bottom: 16px;

      @include breakpoint-down('deskS') {
        width: 50%;
      }

      @include breakpoint-down('tabS') {
        width: 100%;
      }

      &:last-child {
        border: none;
        padding-bottom: 0;
      }
    }
  }
</style>