<template>
  <button class="butt" :style="buttonStyle" :disabled="disabled">
    <slot></slot>
  </button>
</template>

<script setup lang="ts">
  import { BUTTON_SIZE } from '@/utils/constant';
  import type { CSSProperties } from 'vue';
  const props = defineProps({
    /** 按钮是否禁用 */
    disabled: { type: Boolean, default: false },
    /** 按钮的尺寸 */
    size: { type: Number, default: BUTTON_SIZE },
    /** 按钮的图标 */
    image: { type: String, default: '' },
  });

  defineSlots<{
    /** 主体内容 */
    default: () => any;
  }>();

  const buttonStyle = computed<CSSProperties>(() => ({
    width: `${props.size}px`,
    height: `${props.size}px`,
    backgroundImage: props.image ? `url(${props.image})` : undefined,
  }));
</script>

<style lang="scss" scoped>
  .butt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: none;
    outline: none;
    transition: all 0.2s;

    &:disabled {
      cursor: not-allowed;
    }
  }
</style>
