<script setup lang="ts">
import type { ButtonVariant } from '#layers/types/components/button'

interface props {
  variant?: ButtonVariant
  disabled?: boolean
}

const props = withDefaults(defineProps<props>(), {
  variant: 'filled',
  disabled: false,
})
</script>

<template>
  <button
    class="btn-base"
    :data-variant="props.variant"
    :disabled="props.disabled"
  >
    <slot />
  </button>
</template>

<style scoped>
.btn-base {
  @apply relative inline-flex items-center justify-center w-full py-[14px] px-5 text-sm font-medium rounded-lg
  before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-black/10 before:rounded-lg before:transition-all before:duration-300 before:ease-in-out;
}

.btn-base[data-variant='filled'] {
  @apply bg-[var(--primary)] text-[var(--text-secondary)]
  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-lg after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0
  hover:after:opacity-20;
}

.btn-base[data-variant='outlined'] {
  @apply bg-white text-[#333333]
  hover:before:border-[#999];
}

.btn-base:disabled {
  @apply cursor-default bg-[#EBEBEB] text-[#999]
  before:border-[#D9D9D9]
  after:hidden
  hover:before:border-[#D9D9D9];
}
</style>
