<template>
  <component
    :is="tag"
    class="px-24 py-4 rounded-[20px] text-[30px] cursor-pointer"
    :class="{ baseStyle, size }"
    data-ui="ui-button"
  >
    <slot />
  </component>
</template>

<script setup lang="ts">
import { toRefs, computed } from 'vue'
import { colorVariants } from './UiButton.params.ts'

const props = defineProps({
  tag: {
    type: String,
    default: 'button',
  },
  variants: {
    type: String as () => 'primary' | 'secondary',
    default: 'primary',
    validator: (value) => {
      return ['primary', 'secondary'].includes(value as string)
    },
  },
  size: {
    type: String,
    default: 'font-bold',
  },
})

const { tag, variants } = toRefs(props)

const colorClasses: Record<'primary' | 'secondary', string[]> = {
  primary: colorVariants.primary,
  secondary: colorVariants.secondary,
}

const baseStyle = computed(() => {
  const variant = variants.value as 'primary' | 'secondary'
  return colorClasses[variant]?.join(' ') || ''
})
</script>
