<script lang="ts" setup>
import { computed, ref } from 'vue';

interface Props {
  text: string
  icon?: string
  pattern?: 'download' | 'default'
  qrcode?: string,
  small?: boolean,
  checked?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  pattern: 'default',
  small: false,
  checked: false
})

const getImgURL = computed(() => {
  return (url: string) => {
    return new URL(`../assets/${url}`, import.meta.url).href
  }
})

const emits = defineEmits(['clickBtn'])

</script>

<template>
  <div class="flex flex-col justify-center items-center relative md:block ">
    <button
      class=" bg-gray-800 text-white w-64 md:w-40 h-14 rounded-slgBtn flex items-center justify-center hover:bg-mainPurple"
      :class="checked ? ' md:bg-mainPurple' : 'md:bg-gray-800'">
      <img v-if="props.icon" :src="getImgURL(props.icon)" class=" pr-3 md:pr-2 md:w-6">
      <span :class="props.small ? 'md:text-sm text-base' : 'text-base'">{{ props.text }}</span>
    </button>
  </div>
</template>