<!-- Карточка модели: аватар, параметры, страна, счётчики видео/обновлений -->
<template>
  <NuxtLink
    :to="generateLink(`/models/${convertString().toSlug(card.title)}`)"
    :title="card.title"
    class="card-model"
  >
    <div class="card-model__inner">
      <UiImg
        :src="currentImage"
        :loading="loading"
        :alt="card.title"
        :priority="priority"
        class="card-model__img"
        width="64"
        height="64"
        sizes="xs:64px sm:64px md:64px lg:64px"
        @error="onImageError"
      />
      <div class="card-model__wrapper">
        <p class="card-model__info">
          <span class="card-model__info-name">
            {{ card.title }}
          </span>
          <span
            v-if="card.country && card.country.name"
            :title="`${t('birthplace_country')}: ${card.country.title}`"
            class="card-model__country-wrapper"
          >
            <img
              :alt="card.country.title"
              :src="`/icons/flags/${card.country.name}.svg`"
              class="card-model__info-country"
              width="16"
              height="12"
            >
          </span>
        </p>
        <p class="card-model__parameters">
          <span
            v-for="(parameter, index) in card.parameters"
            :key="`parameter-${index}`"
            class="card-model__parameter"
          >
            <span
              v-if="parameter.title"
              class="card-model__parameter-title"
            >{{ getValue(parameter) }}</span>
          </span>
        </p>
        <p class="card-model__parameters-footer">
          <span
            v-if="card.videosCount"
            class="card-model__count"
          >
            <UiIcon
              name="video-camera"
              size="14"
            />
            {{ $n(card.videosCount, 'compact') }}
          </span>
          <span
            v-if="card.lastVideoAddedAt"
            class="card-model__update"
          >
            <UiIcon
              name="time-updated"
              size="14"
            />
            {{ formatDate(card.lastVideoAddedAt) }}
          </span>
        </p>
      </div>
    </div>
  </NuxtLink>
</template>

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

const props = withDefaults(defineProps<{
  card: IModelCard
  loading?: 'eager' | 'lazy'
  priority?: boolean
}>(), {
  loading: 'lazy'
});

const { generateLink } = useGenerateLink();
const { t } = useI18n();

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;
});

function onImageError() {
  imageError.value = true;
}

function getValue(item: { title?: string; value?: string }) {
  if (item.title === 'age') {
    return `${item.value} ${t('yo')}`;
  }
  return `${item.value}`;
}
</script>

<style lang="scss">
.card-model {
  container-type: inline-size;
  background-color: $model-card-bg;
  border-radius: $radius-xl;
  border: 1px solid $model-card-border;
  display: block;

  @include hover(border-color, background-color, box-shadow) {
    border-color: $model-card-border--hover;
    background-color: $model-card-bg--hover;
    box-shadow: $card-ring-shadow--hover;
  }
}

.card-model__inner {
  --img-size: 80px;

  display: grid;
  grid-template-columns: var(--img-size) 1fr;
  padding: 8px;
  column-gap: 8px;

  @include from-br(sm) {
    padding: 12px;
    column-gap: 12px;
  }
}

.card-model__parameters {
  @include font-sm;

  color: $model-card-params;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.card-model__parameters-footer {
  @include font-sm;

  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  color: $model-card-params-footer;
  margin-top: 2px;
  column-gap: 12px;
}

.card-model__update {
  display: grid;
  grid-template-columns: 12px 1fr;
  column-gap: 4px;
  align-items: center;
}

.card-model__info-name {
  font-weight: 500;
  color: $model-card-name;
  white-space: nowrap;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  text-transform: capitalize;

  @include from-br(sm) {
    transition: var(--transition) color;
  }
}

@media (hover: hover) {
  .card-model:is(:hover, :focus-visible) .card-model__info-name {
    color: $model-card-name--hover;
  }
}

.card-model__info {
  display: grid;
  column-gap: 8px;
  margin-bottom: 4px;
  grid-template-columns: auto auto auto;
  justify-content: start;
  align-items: center;
}

.card-model__count {
  @include font-sm;

  display: flex;
  align-items: center;
  column-gap: 4px;
  color: $model-card-count;
}

.card-model__img {
  width: var(--img-size);
  height: var(--img-size);
  border-radius: $radius-xl;
  object-fit: cover;
  object-position: center 70%;
}

.card-model__parameter:not(:last-child) {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 6px;
  padding-right: 6px;

  &::after {
    content: '·';
  }
}

.card-model__parameter {
  text-align: center;
  color: inherit;
}

.card-model__country-wrapper {
  padding-block: 4px;
}
</style>
