<template>
  <button
    :class="[
      'rounded-full px-5 py-3 text-sm font-semibold transition-[transform,box-shadow,background,color,border-color] duration-200 active:translate-y-px',
      variant === 'secondary'
        ? 'border border-gray-200 bg-white text-slate-900 shadow-[0_8px_18px_rgba(0,0,0,0.08)]'
        : 'border border-slate-900 bg-slate-900 text-white shadow-[0_12px_30px_rgba(0,0,0,0.16)]',
    ]"
  >
    <slot />
  </button>
</template>

<script setup lang="ts">
defineProps<{
  variant?: 'primary' | 'secondary'
}>()
</script>
