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

<script setup lang="ts">
import type {IBrand} from "~/types";

const props = defineProps<{
  brand: IBrand;
}>();
</script>

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

  @include hover {
    box-shadow: 0 0 30px 3px rgba($accentDark, 0.4);
  }

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

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

  & p {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
  }
}
</style>