<script setup lang="ts">
interface Props {
  size?: string
  variant?: 'regular' | 'outline'
  color?: string
}

const props = withDefaults(defineProps<Props>(), {
  size: 'md',
  variant: 'regular',
  color: 'regular'
})

const styleClass = computed(() => {
  const sizeClass = `btn-${props.size}`
  const variantClass = props.variant !== 'regular' ? `btn-${props.variant}` : ''
  const colorClass = props.color !== 'regular' ? `btn-${props.color}` : ''
  return [sizeClass, variantClass, colorClass]
})
</script>
<template>
  <button class="btn duration-0" :class="styleClass"><slot></slot></button>
</template>
