<script setup lang="ts">
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const buttonVariants = cva(
  'babylai:border babylai:disabled:bg-black-white-300 babylai:cursor-pointer babylai:text-xl! babylai:transition-all babylai:w-full babylai:disabled:border-black-white-300 babylai:disabled:cursor-not-allowed babylai:disabled:text-white babylai:duration-200 babylai:ease-out babylai:flex babylai:gap-1 babylai:items-center babylai:justify-center babylai:p-3 babylai:relative babylai:rounded-2xl',
  {
    variants: {
      variant: {
        default:
          'babylai:bg-primary babylai:border-primary babylai:text-white babylai:hover:bg-primary-600 babylai:hover:border-primary-600',
        secondary:
          'babylai:bg-transparent babylai:border-primary babylai:text-primary babylai:hover:bg-primary-100 babylai:hover:border-primary-200',
        ghost:
          'babylai:bg-transparent babylai:p-2 babylai:text-secondary-foreground babylai:shadow-sm babylai:hover:bg-secondary/80',
      },
      size: {
        default: '',
        sm: 'babylai:h-8 babylai:rounded-full babylai:px-3 babylai:text-xs',
        lg: '',
        icon: 'babylai:h-7 babylai:w-7',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  }
)

type ButtonVariants = VariantProps<typeof buttonVariants>

interface Props extends /* @vue-ignore */ ButtonVariants {
  variant?: ButtonVariants['variant']
  size?: ButtonVariants['size']
  disabled?: boolean
  type?: 'button' | 'submit' | 'reset'
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'default',
  size: 'default',
  type: 'button',
})

defineEmits<{ click: [event: MouseEvent] }>()
</script>

<template>
  <button
    :type="props.type"
    :disabled="props.disabled"
    :class="cn(buttonVariants({ variant: props.variant, size: props.size }), props.class)"
    @click="$emit('click', $event)"
  >
    <slot />
  </button>
</template>
