<script setup lang="ts">
// import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  text: {
    type: String,
    default: '下一步',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  theme: {
    type: String as () => 'primary' | 'light',
    default: 'primary',
  },
  type: {
    type: String as () => 'button' | 'text',
    default: 'button',
  },
})

const emits = defineEmits(['click'])

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

<template>
  <button
    class="action-btn"
    :class="[theme, { 'is-disabled': disabled, 'text-btn': type === 'text' }]"
    @click="handleClick"
  >
    <span v-if="type === 'text'" class="btn-text">{{ text }}</span>
    <slot v-else />
  </button>
</template>

<style lang="scss" scoped>
.action-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #eb5e55;
  box-shadow: 0 8px 0 #fcc64f;

  .arrow-icon {
    font-size: 32px;
  }

  &:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 10px 0 #fcc64f;
  }

  &:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #fcc64f;
  }

  &.text-btn {
    width: auto;
    min-width: 180px;
    padding: 0 30px;
    border-radius: 40px;

    .btn-text {
      font-size: 30px;
      font-weight: bold;
      letter-spacing: 2px;
    }
  }

  &.is-disabled {
    cursor: not-allowed;

    &:hover {
      transform: none;
    }

    &:active {
      transform: none;
    }
  }
}

.light {
  background: white;
  color: #eb5e55;
  border: 2px solid #eb5e55;
  box-shadow: 0 8px 0 #fcc64f;

  &:hover {
    background-color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 0 #fcc64f;
  }

  &:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #fcc64f;
  }
}
</style>
