<script lang="ts">
  import { loadEvent } from '../../store';
  import loadObserver from '$utils/loadObserver';

  export let image: string;
  export let name: string;
  export let post: string;

  loadEvent.set(false);

  const onload = loadObserver(() => {
    loadEvent.set(true);
  });
</script>

<div class="card-user">
  <div class="card-user__header">
    <img use:onload src={image} alt="" class="card-user__image" />
  </div>
  <div class="card-user__body">
    <p class="card-user__name">{name}</p>
    <p class="card-user__post">{post}</p>
  </div>
</div>

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

  .card-user {
    user-select: none;

    &__header {
      margin-bottom: 27px;

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

    &__image {
      overflow: hidden;
      border-radius: 16px;
      max-height: 460px;
      object-fit: cover;
      object-position: center;

      @include breakpoint-down('deskS') {
        border-radius: 8px;
      }
    }

    &__name {
      @include baseTitle;

      margin-bottom: 4px;

      @include breakpoint-down('deskL') {
        margin-bottom: 7px;
      }

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

    &__post {
      @include smallDefault;
    }
  }
</style>