<template>
  <NuxtLink
    :class="[
      {'--simple': simple},
      {'--model': isModel},
      {'--default': isDefault},
    ]"
    :to="link"
    class="search-item"
  >
    <UiImg
      v-if="isModel"
      :src="item?.primaryImageUrl || `/img/model-placeholder.webp`"
      :alt="title"
      class="search-item__icon"
      sizes="32px"
      width="32"
      height="32"
    />
    <span
      class="search-item__text"
      v-html="safeTitle"
    />
    <span
      v-if="item.videosCount"
      class="search-item__count"
    >{{ item.videosCount }}</span>
  </NuxtLink>
</template>

<script setup lang="ts">
import type { ISearchTopModelsType } from '../../types';
import { convertString } from '../../runtime';
import DOMPurify from 'dompurify';

const props = defineProps<{
  item: ISearchTopModelsType
  prefix: string
  simple?: boolean
  isDefault?: boolean
}>();

const title = computed(() => props.item?.title?.replace(/<[^>]*>/g, ''));
const { generateLink } = useGenerateLink();

const slug = computed(() => convertString().toSlug(title.value));
const link = computed(() => generateLink(`/${props.prefix}/${slug.value}`));

const isModel = computed(() => props.prefix === 'models');
const safeTitle = computed(() =>
  DOMPurify.sanitize(props.item.title, {
    ALLOWED_TAGS: ['em'],
    ALLOWED_ATTR: []
  })
);
</script>

<style lang="scss">
.search-item {
  @include font-sm;

  display: flex;
  align-items: center;
  column-gap: 8px;
  color: $search-item-text--mobile;
  padding-block: 6px;
  padding-inline: 8px;

  @include from-br(sm) {
    border-radius: 4px;
    color: $search-item-text;
  }

  @include hover(background-color, color) {
    color: $search-item-text--hover;
    background-color: $search-item-bg--hover;
  }
}

.search-item:not(.--model) {
  position: relative;
  display: flex;
  column-gap: 8px;
  align-items: center;

  &::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: $radius-full;
    background-color: $search-item-dot;
  }
}

.search-item.--simple {
  @include from-br(sm) {
    padding: 8px;
  }
}

.search-item:not(.--simple, :last-of-type) {
  @include from-br(sm) {
    margin-bottom: $spacing;
  }
}

.search-item__icon {
  border-radius: $radius-full;
}

.search-item__text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

.search-item__text em {
  color: $search-item-highlight;
  font-style: normal;
}

.search-item__count {
  @include font-sm;

  margin-left: auto;
  color: $search-item-count;
  font-feature-settings: 'cv11' on;
}
</style>
