<template>
  <button
    type="button"
    class="btn"
    :class="[variant && `btn--${variant}`, { 'btn--disabled': disabled }]"
    :disabled="disabled"
  >
    <slot />
  </button>
</template>

<script setup lang="ts">
defineProps<{
  variant?: 'primary' | 'outline' | 'ghost' | 'danger';
  disabled?: boolean;
}>();
</script>

<style scoped>
@reference "tailwindcss";
.btn {
  @apply h-10 text-sm;
  padding: 0 1.5rem;
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s,
    transform 0.1s;
  @apply select-none;
}
.btn--primary {
  background: var(--color-primary);
  color: var(--color-black);
}
.btn--primary:hover {
  background: var(--color-primary-light);
  transform: scaleX(1.03);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.btn--outline:hover {
  background: var(--color-primary-dark);
  transform: scaleX(1.03);
}

.btn--ghost {
  background: transparent;
  color: var(--color-secondary-light);
  border: 1px solid var(--color-secondary-light);
}
.btn--ghost:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: scaleX(1.03);
}

.btn--danger {
  background: var(--color-red);
  color: #fff;
}
.btn--danger:hover {
  filter: brightness(1.2);
  transform: scaleX(1.03);
}

.btn:active {
  transform: scale(0.97);
}
.btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--disabled:hover {
  transform: scale(1) !important;
}
</style>
