<template>
  <div>
    <button
      :class="[props.size === 'medium' ? styleClass.meduimBtn : styleClass.largeBtn,
      style]"
      @click="handleClick"
    >{{ props.text }}</button>
  </div>
</template>

<script setup lang="ts">
import { withDefaults, defineProps, defineEmits, computed } from 'vue';
import styleClass from '@/assets/style/style.module.css'

const props = withDefaults(defineProps<{
  text: string,
  theme?: 'main' | 'second' | 'dark',
  size?: 'large' | 'medium'
}>(), {
  theme: 'main',
  size: 'medium'
})

const emits = defineEmits(['handleClick'])
const handleClick = (e: Event) => {
  emits('handleClick', e)
}

const style = computed(() => {
  let theme = ''
  switch (props.theme) {
    case 'main':
      theme = styleClass.mainBtn
      break
    case 'second':
      theme = styleClass.secondBtn
      break
    case 'dark':
      theme = styleClass.darkBtn
      break
  }
  return theme
})

</script>