<!-- Мини-карточка модели: аватар слева, имя, возраст/счётчик видео -->
<template>
  <div class="card-model-mini">
    <UiImg
      :src="currentImage"
      :alt="card.title"
      class="card-model-mini__img"
      width="48"
      height="48"
      sizes="48px"
      @error="imageError = true"
    />
    <div class="card-model-mini__wrapper">
      <p class="card-model-mini__name">
        {{ card.title }}
        <img
          v-if="card.country"
          :alt="card.country"
          :src="`/icons/flags/${card.country}.svg`"
          class="card-model-mini__flag"
          width="16"
          height="12"
        >
      </p>
      <div class="card-model-mini__info">
        <span
          v-if="card.videosCount"
          class="card-model-mini__detail"
        >
          <UiIcon
            name="video-camera"
            size="14"
          />
          {{ card.videosCount }}
        </span>
        <span
          v-if="card.age"
          class="card-model-mini__detail"
        >{{ card.age }} {{ $t('yo') }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { IModelCard } from '../../types';

const props = defineProps<{
  card: IModelCard
}>();

const fallbackImage = '/img/model-placeholder.webp';
const imageError = ref(false);

const currentImage = computed(() => {
  if (imageError.value) return fallbackImage;
  return props.card.primaryImageUrl || props.card.thumbUrl || fallbackImage;
});
</script>

<style lang="scss">
.card-model-mini {
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 16px;
  align-items: start;
}

.card-model-mini__img {
  width: 48px;
  height: 48px;
  border-radius: $radius-full;
  object-fit: cover;
}

.card-model-mini__name {
  @include font-sm;

  display: flex;
  align-items: center;
  column-gap: 8px;
  font-weight: 500;
  color: $model-card-mini-name;
  text-transform: capitalize;
  margin-bottom: 4px;
}

.card-model-mini__info {
  @include font-xs;

  display: flex;
  align-items: center;
  column-gap: 8px;
  color: $model-card-mini-info;
}

.card-model-mini__detail {
  display: flex;
  align-items: center;
  column-gap: 4px;
}

.card-model-mini__flag {
  border-radius: 2px;
}
</style>
