<template>
  <component-listing
    id="co-authors-listing"
    :static-data="data"
    :fractions="data.length > 3 ? 3 : data.length"
    :pagination="false"
    direction="vertical"
    class="co-authors-listing-container"
  >
    <template #default="{ item }">
      <AuthorCard
        v-bind="item"
        :key="item.uuid"
        :image="$_getContentImage(item.image, 'avatar')"
      />
    </template>
  </component-listing>
</template>

<script>
import AuthorCard from '@inside-users/components/lib/AuthorCard'

export default {
  name: 'CoAuthors',
  components: { AuthorCard },
  props: {
    data: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="scss">
.co-authors-listing-container {
  width: 100% !important;
  margin: var(--spacing-m) 0;

  .data-container {
    justify-content: center;
  }

  .author-card-container {
    margin: 0 auto !important;
  }
}
</style>
