import React from 'react';
import { TouchableOpacity, TouchableOpacityProps, ActivityIndicator, GestureResponderEvent, StyleProp, ViewStyle, StyleSheet } from 'react-native';
import { Typography } from './Typography';

interface ButtonProps extends TouchableOpacityProps {
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
  title: string;
  loading?: boolean;
  onPress?: (event: GestureResponderEvent) => void;
  disabled?: boolean;
  style?: StyleProp<ViewStyle>;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  title,
  loading = false,
  disabled,
  style,
  ...props
}) => {
  const getBackgroundStyle = () => {
    if (disabled) return styles.bgDisabled;
    switch (variant) {
      case 'primary':
        return styles.bgPrimary;
      case 'secondary':
        return styles.bgSecondary;
      case 'outline':
        return styles.bgOutline;
      case 'ghost':
        return styles.bgGhost;
      default:
        return styles.bgPrimary;
    }
  };

  const getTextStyle = () => {
    if (disabled) return styles.textDisabled;
    switch (variant) {
      case 'primary':
      case 'secondary':
        return styles.textWhite;
      case 'outline':
      case 'ghost':
        return styles.textPrimary;
      default:
        return styles.textWhite;
    }
  };

  return (
    <TouchableOpacity
      style={[styles.container, getBackgroundStyle(), style]}
      disabled={disabled || loading}
      activeOpacity={0.8}
      {...props}
    >
      {loading ? (
        <ActivityIndicator color={variant === 'outline' || variant === 'ghost' ? '#4F46E5' : '#FFFFFF'} />
      ) : (
        <Typography weight="medium" style={getTextStyle()}>
          {title}
        </Typography>
      )}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 12,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  bgDisabled: {
    backgroundColor: '#D1D5DB',
  },
  bgPrimary: {
    backgroundColor: '#4F46E5',
  },
  bgSecondary: {
    backgroundColor: '#10B981',
  },
  bgOutline: {
    backgroundColor: 'transparent',
    borderColor: '#4F46E5',
    borderWidth: 2,
  },
  bgGhost: {
    backgroundColor: 'transparent',
  },
  textDisabled: {
    color: '#6B7280',
  },
  textWhite: {
    color: '#FFFFFF',
  },
  textPrimary: {
    color: '#4F46E5',
  },
});