<!-- Ссылка в виде кнопки (.ui-btn): NuxtLink, либо span при active/disabled -->
<template>
  <span
    v-if="active || disabled"
    :class="[
      theme ? `--${theme}` : '',
      `--${size}`,
      {'--wide': wide},
      {'--active': active},
      {'--disabled': disabled},
    ]"
    class="ui-btn"
  >
    <slot/>
  </span>
  <NuxtLink
    v-else
    :class="[
      theme ? `--${theme}` : '',
      `--${size}`,
      {'--wide': wide},
    ]"
    class="ui-btn"
    exact-active-class="--exact-active"
    v-bind="$attrs"
  >
    <slot/>
  </NuxtLink>
</template>

<script setup lang="ts">
import type { ButtonThemes } from '../../types';

withDefaults(
  defineProps<{
    theme?: ButtonThemes,
    size?: 'm' | 's',
    wide?: boolean,
    active?: boolean,
    disabled?: boolean,
  }>(),
  {
    size: 'm',
  }
);
</script>
