import {View} from 'react-native';
import {
  Image,
  ImageSourcePropType,
  ImageStyle,
  StyleProp,
  Text,
  TouchableOpacity,
  ViewStyle,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

interface MyIconButtonProps {
  image: ImageSourcePropType;
  imageStyle?: StyleProp<ImageStyle>;
  text: string;
}

export function MyIconButton({image, imageStyle, text}: MyIconButtonProps) {
  return (
    <TouchableOpacity
      style={{
        backgroundColor: '#26263f',
        alignItems: 'center',
        padding: 10,
        flexDirection: 'row',
        borderRadius: 10,
      }}>
      <Image source={image} style={imageStyle} />
      <Text
        style={{
          flex: 1,
          textAlign: 'center',
          color: '#fff',
          fontSize: 18,
          fontWeight: 'bold',
        }}>
        {text}
      </Text>
    </TouchableOpacity>
  );
}

interface MyButtonProps {
  style?: StyleProp<ViewStyle>;
  type: 'primary' | 'secondary';
  text: string;
  onPress?: () => void;
}

export function MyButton({style, type, text, onPress}: MyButtonProps) {
  const ButtonText = () => (
    <Text style={{color: '#fff', fontSize: 18, fontWeight: 'bold'}}>
      {text}
    </Text>
  );

  return (
    <TouchableOpacity
      style={[
        style,
        {
          borderRadius: 10,
        },
      ]}
      onPress={onPress}>
      {type === 'primary' ? (
        <LinearGradient
          colors={['#931278', '#6030da']}
          start={{x: 0, y: 1}}
          end={{x: 1, y: 0}}
          style={{
            alignItems: 'center',
            padding: 10,
            borderRadius: 10,
          }}>
          <ButtonText />
        </LinearGradient>
      ) : (
        <View
          style={{
            backgroundColor: '#37375c',
            alignItems: 'center',
            padding: 10,
            borderRadius: 10,
          }}>
          <ButtonText />
        </View>
      )}
    </TouchableOpacity>
  );
}
