<template>
  <div
    class="side-menu-setting-label"
    :class="{
      'side-menu-setting-label-short': short,
      'side-menu-setting-label--top': top,
      'side-menu-setting-label--middle': middle,
    }"
  >
    {{ t('side_menu', label) }}

    <template v-if="help">
      <br />
      <em>{{ help }}</em>
    </template>
  </div>
</template>

<script setup>
const { short, label } = defineProps({
  short: {
    type: Boolean,
    required: false,
    default: false,
  },
  label: {
    type: String,
    required: true,
  },
  middle: {
    type: Boolean,
    required: false,
    default: false,
  },
  top: {
    type: Boolean,
    required: false,
    default: true,
  },
  help: {
    type: [String, null],
    required: false,
    default: false,
  },
})
</script>
