import { ActivityIndicator, Pressable, Text } from 'react-native';
import type { PressableProps } from 'react-native';

type Variant = 'primary' | 'secondary' | 'ghost' | 'danger';

type Props = PressableProps & {
  children: React.ReactNode;
  variant?: Variant;
  loading?: boolean;
  disabled?: boolean;
  className?: string;
};

const variantStyles: Record<Variant, { container: string; text: string }> = {
  primary: {
    container: 'bg-rebreak-500 rounded-xl px-5 py-3.5 items-center justify-center',
    text: 'text-white text-base',
  },
  secondary: {
    container: 'bg-neutral-100 border border-neutral-200 rounded-xl px-5 py-3.5 items-center justify-center',
    text: 'text-neutral-800 text-base',
  },
  ghost: {
    container: 'rounded-xl px-5 py-3.5 items-center justify-center',
    text: 'text-neutral-600 text-base',
  },
  danger: {
    container: 'bg-red-50 border border-red-200 rounded-xl px-5 py-3.5 items-center justify-center',
    text: 'text-red-600 text-base',
  },
};

export function Button({
  children,
  variant = 'primary',
  loading = false,
  disabled = false,
  className = '',
  ...rest
}: Props) {
  const styles = variantStyles[variant];
  const isDisabled = disabled || loading;

  return (
    <Pressable
      className={`${styles.container} ${isDisabled ? 'opacity-50' : ''} ${className}`}
      disabled={isDisabled}
      {...rest}
    >
      {loading ? (
        <ActivityIndicator color={variant === 'primary' ? '#fff' : '#f59e0b'} size="small" />
      ) : (
        <Text className={styles.text} style={{ fontFamily: 'Nunito_600SemiBold' }}>{children}</Text>
      )}
    </Pressable>
  );
}