<template>
  <div class="ui-empty-state">
    <img
      :alt="$t('error_icon')"
      class="ui-empty-state__img"
      sizes="64px"
      width="64"
      height="64"
      src="/img/mood-cry.svg"
    >
    <p class="ui-empty-state__title">{{ $t('empty.no_results') }}</p>
    <p class="ui-empty-state__text">{{ withoutReset ? $t('empty.try_adjusting_settings') : $t('empty.try_adjusting') }}</p>
    <UiBtn
      v-if="!withoutReset"
      theme="primary"
      @click="onButtonClick"
    >{{ $t('empty.reset_filter') }}</UiBtn>
  </div>
</template>

<script setup lang="ts">
const router = useRouter();

defineProps<{
  withoutReset?: boolean
}>();

function onButtonClick() {
  router.push({
    query: {}
  });
}
</script>

<style lang="scss">
.ui-empty-state {
  display: grid;
  place-content: center;
  place-items: center;
  row-gap: 8px;
  height: 100%;
  padding-block: 32px;

  @include from-br(sm) {
    padding-block: 64px;
  }
}

.ui-empty-state__title {
  @include font-base;

  font-weight: 700;
  text-transform: uppercase;
}

.ui-empty-state__text {
  @include font-sm;

  font-weight: 400;
  color: $empty-text;
}

.ui-empty-state__text,
.ui-empty-state__img {
  @include from-br(sm) {
    margin-bottom: 8px;
  }
}
</style>
