<template>
  <button
    @click="handleClick"
    :class="[
      'group flex items-center w-full px-3 py-2 text-sm text-left transition-colors duration-150',
      variant === 'danger' 
        ? 'text-red-700 hover:bg-red-50 hover:text-red-900' 
        : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
    ]"
    role="menuitem"
    :disabled="disabled"
  >
    <!-- Icon -->
    <div 
      :class="[
        'flex-shrink-0 w-4 h-4 mr-3',
        variant === 'danger' 
          ? 'text-red-500 group-hover:text-red-600' 
          : 'text-gray-400 group-hover:text-gray-500'
      ]"
    >
      <slot name="icon" />
    </div>
    
    <!-- Text -->
    <span class="flex-1">
      <slot />
    </span>
  </button>
</template>

<script setup>
const props = defineProps({
  variant: {
    type: String,
    default: 'default', // 'default' or 'danger'
    validator: (value) => ['default', 'danger'].includes(value)
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['click'])

const handleClick = (event) => {
  if (props.disabled) return
  emit('click', event)
}
</script>

<style scoped>
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button:disabled:hover {
  background-color: transparent !important;
  color: inherit !important;
}
</style>
