<template>
  <button class="action-button" :class="buttonClass" @click="handleClick">
    <img v-if="icon" :src="icon" :alt="text" class="action-button__icon" />
    <span class="action-button__text">{{ text }}</span>
  </button>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  text: {
    type: String,
    required: true
  },
  icon: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'secondary', 'link'].includes(value)
  },
  size: {
    type: String,
    default: 'medium',
    validator: (value) => ['small', 'medium', 'large'].includes(value)
  }
})

const emit = defineEmits(['click'])

const buttonClass = computed(() => {
  return [
    `action-button--${props.type}`,
    `action-button--${props.size}`
  ]
})

const handleClick = () => {
  emit('click')
}
</script>

<style scoped lang="scss">
@use '@/styles/mixins.scss' as *;
@use '../../assets/styles/common.scss' as *;

.action-button {
  @extend .btn-custom-bg; // 继承自定义背景按钮基类

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: vw(6);
  font-family: SourceHanSansCN-Medium, sans-serif;
  font-weight: 500;
  white-space: nowrap;

  &__icon {
    width: vw(16);
    height: vh(16);
  }

  &__text {
    line-height: 1;
  }

  // 类型样式
  &--primary {
    background-image: url('../../assets/images/文本按钮bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    color: var(--text-white);
  }

  &--secondary {
    background: var(--bg-panel);
    color: var(--text-white);
    border: 1px solid var(--border-color);
  }

  &--link {
    background: transparent;
    color: var(--primary-color);
    text-decoration: underline;
  }

  // 尺寸样式
  &--small {
    padding: vh(6) vw(12);
    font-size: fs(12);
  }

  &--medium {
    padding: vh(10) vw(20);
    font-size: fs(14);
  }

  &--large {
    padding: vh(14) vw(28);
    font-size: fs(16);
  }
}
</style>
