<template>
  <view
    class="text-button"
    :class="[`text-button--${type}`, { 'text-button--disabled': disabled }]"
    @click="handleClick"
  >
    <text>{{ text }}</text>
  </view>
</template>

<script setup>
const props = defineProps({
  text: { type: String, required: true },
  type: { type: String, default: 'default' },
  disabled: { type: Boolean, default: false }
})

const emit = defineEmits(['click'])

function handleClick() {
  if (!props.disabled) {
    emit('click')
  }
}
</script>

<style lang="scss" scoped>
.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16rpx 32rpx;
  border-radius: 8rpx;
  transition: all 0.2s;

  &--default {
    background-color: $bg-tertiary;
    color: $text-primary;

    &:active {
      background-color: $bg-secondary;
    }
  }

  &--danger {
    background-color: rgba($danger, 0.2);
    color: $danger;

    &:active {
      background-color: rgba($danger, 0.3);
    }
  }

  &--warning {
    background-color: rgba($warning, 0.2);
    color: $warning;

    &:active {
      background-color: rgba($warning, 0.3);
    }
  }

  &--disabled {
    opacity: 0.5;
    pointer-events: none;
  }
}
</style>
