import { TouchableOpacity, Text, ActivityIndicator } from 'react-native'

interface ButtonProps {
  label: string
  onPress: () => void
  variant?: 'primary' | 'secondary' | 'ghost'
  loading?: boolean
  disabled?: boolean
  icon?: string
}

export function Button({
  label,
  onPress,
  variant = 'primary',
  loading,
  disabled,
  icon,
}: ButtonProps) {
  const base = 'rounded-2xl py-4 flex-row items-center justify-center gap-2'
  const variants = {
    primary: `${base} bg-brand-500`,
    secondary: `${base} bg-white border border-gray-200`,
    ghost: `${base}`,
  }
  const textVariants = {
    primary: 'text-white font-semibold text-base',
    secondary: 'text-gray-900 font-semibold text-base',
    ghost: 'text-brand-500 font-semibold text-base',
  }

  return (
    <TouchableOpacity
      onPress={onPress}
      disabled={disabled || loading}
      className={`${variants[variant]} ${disabled || loading ? 'opacity-50' : ''}`}
    >
      {loading ? (
        <ActivityIndicator color={variant === 'primary' ? 'white' : '#E63946'} />
      ) : (
        <>
          {icon && <Text className="text-xl">{icon}</Text>}
          <Text className={textVariants[variant]}>{label}</Text>
        </>
      )}
    </TouchableOpacity>
  )
}