<template>
  <nuxt-link-locale
      class="card"
      :to="`/catalog/${category.slug}`"
  >
    <nuxt-img
        v-if="category.image"
        format="webp"
        densities="x1"
        :src="category.image"
        :alt="category.name"
        class="card__image"
        loading="lazy"
    />
    <div class="card__image-placeholder" v-else />
    <p>{{ category.name }}</p>
  </nuxt-link-locale>
</template>

<script setup lang="ts">
import type {ICategory} from '@types';

const props = defineProps<{
  category: ICategory;
}>();
</script>

<style lang="scss" scoped>
.card {
  cursor: pointer;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background-color: $main;
  border-radius: $default_border_radius;
  border: 1px solid $border;
  height: 100%;
  padding: 23px;

  @include hover {
    box-shadow: 0 0 10px 2px $primary_shadow_hover;
    border-color: $border_hover;
  }

  &__image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;

    &-placeholder {
      width: 100%;
      aspect-ratio: 1;
      background-color: $primary;
      border-radius: $less_border_radius;
    }
  }

  & p {
    color: $primary_dark;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.5px;
  }
}
</style>