import React from 'react';
import { TouchableOpacity, Text, StyleSheet, ViewStyle } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

import { useTheme } from '../theme/context';

interface ButtonProps {
  title: string;
  onPress: () => void;
  variant?: 'primary' | 'secondary';
  style?: ViewStyle;
}

export function Button({ title, onPress, variant = 'primary', style }: ButtonProps) {
  const theme = useTheme();

  if (variant === 'secondary') {
    return (
      <TouchableOpacity
        onPress={onPress}
        style={[
          styles.container,
          {
            backgroundColor: 'rgba(255, 255, 255, 0.1)',
            borderColor: theme.colors.surface,
            borderWidth: 1,
            borderRadius: theme.borderRadius.m,
          },
          style,
        ]}
      >
        <Text style={[styles.text, { color: theme.colors.text.primary }]}>{title}</Text>
      </TouchableOpacity>
    );
  }

  // Primary variant with gradient
  return (
    <TouchableOpacity onPress={onPress} style={[styles.touchable, style]}>
      <LinearGradient
        colors={theme.colors.gradients.button}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 0 }}
        style={[styles.container, { borderRadius: theme.borderRadius.m }]}
      >
        <Text style={[styles.text, { color: theme.colors.text.onPrimary }]}>{title}</Text>
      </LinearGradient>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  touchable: {
    shadowColor: '#FF4500',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 4,
  },
  container: {
    paddingVertical: 12,
    paddingHorizontal: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 14,
    fontWeight: '700',
  },
});