<template>
  <UiButtonLink v-bind="props">
    <span class="start">
      <slot name="start"></slot>
    </span>

    <span class="content">
      <slot></slot>
    </span>

    <span class="end">
      <slot name="end"></slot>
    </span>
  </UiButtonLink>
</template>

<script setup lang="ts">
import { StatusType } from '@/models';
import { RouteLocationRaw } from 'vue-router';
import UiButtonLink from './UiButtonLink.vue';

interface Props {
  type?: 'button' | 'submit';
  to?: RouteLocationRaw | null;
  color?: StatusType;
  mode?: 'fill' | 'ghost' | 'outline';
  icon?: boolean;
  small?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  to: null,
  type: 'button',
  color: StatusType.Default,
  mode: 'fill',
  icon: false,
  small: false,
});
</script>
