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

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

export function Button({ label, onPress, variant = 'primary', loading, disabled }: ButtonProps) {
  const base = 'rounded-xl py-4 px-6 items-center justify-center';
  const variants = {
    primary: 'bg-primary',
    secondary: 'bg-secondary border border-primary',
    danger: 'bg-danger',
  };
  const textColors = {
    primary: 'text-white',
    secondary: 'text-primary',
    danger: 'text-white',
  };

  return (
    <TouchableOpacity
      className={`${base} ${variants[variant]} ${disabled || loading ? 'opacity-50' : ''}`}
      onPress={onPress}
      disabled={disabled || loading}
      accessibilityRole="button"
      accessibilityLabel={label}
      accessibilityState={{ disabled: !!(disabled || loading) }}
      style={{ minHeight: 52 }}
    >
      {loading ? (
        <ActivityIndicator color={variant === 'secondary' ? '#1A6B72' : 'white'} />
      ) : (
        <Text className={`font-semibold text-base ${textColors[variant]}`}>{label}</Text>
      )}
    </TouchableOpacity>
  );
}