<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);
  }

  &--inModal{
    background: #4FECFF;
    color: #062B5B;
    border-radius: 5px;
  }

  &--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(12) vw(32);
    font-size: fs(14);
  }

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