<template>
  <component
    :is="tag"
    :type="tag === 'button' ? 'button' : ''"
    :to="path"
    :href="path"
    class="px-14 py-4 rounded-[20px] text-[30px] cursor-pointer shadow-[0px_16px_50px_-16px_rgba(229,30,125,1)]"
    :class="[baseStyle, size]"
    data-ui="ui-button"
  >
    <slot />
  </component>
</template>

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

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',
  },
  path: {
    type: String,
    default: '',
  },
})

const { tag, variants, size } = 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>
