<template>
  <UiButton
    :mode="uiMode"
    :color="mode"
    :to="to"
    :small="small"
    :type="submit ? 'submit' : 'button'"
  >
    <template #start>
      <slot name="start"> </slot>
    </template>
    <slot></slot>
    <template #end>
      <slot name="end"> </slot>
    </template>
  </UiButton>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import UiButton from './UiButton.vue';
import { RouteLocationRaw } from 'vue-router';
import { StatusType } from '@/models/status-type.model';

interface Props {
  type?: 'primary' | 'secondary' | 'tertiary';
  to?: RouteLocationRaw | null;
  mode?: StatusType;
  submit?: boolean;
  small?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  type: 'primary',
  to: null,
  mode: StatusType.Default,
  submit: false,
});

const uiMode = computed(() => {
  switch (props.type) {
    case 'primary':
      return 'fill';
    case 'secondary':
      return 'outline';
    case 'tertiary':
      return 'ghost';
    default:
      return 'fill';
  }
});
</script>
