<script setup lang="ts">
const props = withDefaults(defineProps<{
  disabled: boolean
  type: 'primary' | 'default'
}>(), {
  disabled: false,
  type: 'primary',
})
</script>

<template>
  <button
    class="px-[60px] py-[5px] h-[47px]  bg-primary border-none outline-none text-white rounded-3xl flex items-center justify-center text-lg disabled:bg-[red] after:border-none "
    :disabled="disabled"
    :class="{
      '!bg-disabled !text-white': disabled,
      'bg-primary button-shadow': !disabled && type === 'primary',
    }"
  >
    <slot />
  </button>
</template>

<style scoped>
.button-shadow {
  box-shadow: 0 4px 12px 0 rgba(69, 69, 229, 0.30);
}
</style>
