<template>
  <button class="main-button" :type="type">
    <div class="icon">
      <slot name="button-icon"></slot>
    </div>
    <div class="button-text">{{ name }}</div>
  </button>
</template>

<script setup>
defineProps({
  type: {
    type: String,
    default: 'normal'
  },
  name: {
    type: String,
    default: ''
  }
})
</script>

<style scoped>
.main-button {
  height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(230, 231, 232, 1);
  border-radius: 4px;
  cursor: pointer;
  line-height: 34px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: 400;
  transition: all 0.3s;
}

.main-button[type="normal"] {
  background-color: rgba(255, 255, 255, 1);
  color: var(--color-main-primary);
}

.main-button[type="active"] {
  background-color: var(--color-main-active);
  color: #fff;
  border: 1px solid var(--color-main-active);
}



/* 悬停效果
.main-button[type="normal"]:hover {
  background-color: #d9d9d9;
}

.main-button[type="active"]:hover {
  background-color: #40a9ff;
} */


</style>