<template>
  <div class="no-items">
    <div class="no-items__inner">
      <SvgIcon name="smiley-sad" :size="171" />
      <p class="no-items__title">{{ title }}</p>
      <p class="no-items__desc">{{ desc }}</p>
    </div>
  </div>
</template>

<script setup>
import SvgIcon from '@/components/icons/SvgIcon.vue'

defineProps({
  title: { type: String, default: '' },
  desc: { type: String, default: '' },
})
</script>

<style lang="scss" scoped>
.no-items {
  display: flex;
  align-items: center;
  border-radius: 0.75rem;
  justify-content: center;
  height: 100%;
  min-height: 20rem;

  &__inner {
    text-align: center;
  }

  &__title {
    font-family: var(--font-family-fa);
    font-weight: 300;
    font-size: 1.25rem;
    color: #999;
    margin: 1rem 0 0.625rem;
  }

  &__desc {
    font-family: var(--font-family-fa);
    font-weight: 700;
    font-size: 1.25rem;
    color: #3c3c3c;
    margin: 0;
  }
}
</style>
