<template>
  <button
    :type="type"
    :disabled="disabled"
    :class="buttonClasses"
    @click="handleClick"
    class="box-border content-stretch flex flex-col gap-[10px] h-[46px] items-center justify-center overflow-clip p-5 rounded-[20px] w-[208px] transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
    :aria-disabled="disabled"
  >
    <span class="font-bold leading-[1.2] not-italic relative shrink-0 text-[13px] text-center text-nowrap tracking-[0.78px] uppercase whitespace-pre">
      <slot>{{ defaultText }}</slot>
    </span>
  </button>
</template>

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

interface Props {
  /**
   * Button variant - matches Figma design
   */
  variant?: 'default' | 'outline'
  /**
   * Button size
   */
  size?: 'sm' | 'md' | 'lg'
  /**
   * Whether the button is disabled
   */
  disabled?: boolean
  /**
   * Button type attribute
   */
  type?: 'button' | 'submit' | 'reset'
  /**
   * Whether to show the arrow in the button text
   */
  showArrow?: boolean
  /**
   * Additional CSS classes to apply
   */
  class?: string
}

interface Emits {
  /**
   * Emitted when button is clicked
   */
  click: [event: MouseEvent]
}

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

const emit = defineEmits<Emits>()

// Default text based on variant
const defaultText = computed(() => {
  const arrow = props.showArrow ? ' →' : ''
  return props.variant === 'default' ? `looks good${arrow}` : `use original${arrow}`
})

// Dynamic classes based on variant
const buttonClasses = computed(() => {
  const baseClasses = []

  if (props.variant === 'default') {
    // Default variant: yellow background, green text (LOOKS GOOD)
    baseClasses.push('bg-titan-yellow-400 text-titan-green-800')
    baseClasses.push('hover:bg-yellow-500 focus:ring-titan-yellow-400')
  } else {
    // Outline variant: transparent background, yellow border and text (USE ORIGINAL)
    baseClasses.push('bg-transparent text-titan-yellow-400 border-3 border-titan-yellow-400')
    baseClasses.push('hover:bg-titan-yellow-400 hover:text-titan-green-800 focus:ring-titan-yellow-400')
  }

  if (props.class) {
    baseClasses.push(props.class)
  }

  return baseClasses.join(' ')
})

// Handle click events
const handleClick = (event: MouseEvent) => {
  if (!props.disabled) {
    emit('click', event)
  }
}
</script>