import React from "react";
import {
  TouchableOpacity,
  Text,
  StyleSheet,
  ActivityIndicator,
  ViewStyle,
  View,
  TextStyle,
} from "react-native";
import { Feather } from "@expo/vector-icons";
import { useThemeColors, ColorScheme } from "../constants";

interface SendButtonProps {
  onPress: () => void;
  isLoading?: boolean;
  disabled?: boolean;
  label?: string;
  style?: ViewStyle;
  textStyle?: TextStyle;
}

const SendButton: React.FC<SendButtonProps> = ({
  onPress,
  isLoading = false,
  disabled = false,
  label = "Send",
  style,
}) => {
  const isButtonDisabled = isLoading || disabled;
  const colors = useThemeColors();

  return (
    <TouchableOpacity
      style={[
        styles.sendButton,
        { backgroundColor: colors.button },
        isButtonDisabled && styles.disabledButton,
        style,
      ]}
      onPress={onPress}
      disabled={isButtonDisabled}
    >
      {isLoading ? (
        <View
          style={{
            flexDirection: "row",
            alignItems: "center",
            width: "100%",
            flex: 1,
            justifyContent: "center",
          }}
        >
          <ActivityIndicator color="#fff" />
        </View>
      ) : (
        <>
          <Text
            style={[
              styles.sendText,
              isButtonDisabled && styles.disabledText,
              { color: colors.buttonText },
            ]}
          >
            {label}
          </Text>
          <Feather
            name="arrow-right"
            size={16}
            color={isButtonDisabled ? colors.border : colors.buttonText}
          />
        </>
      )}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  sendButton: {
    // paddingVertical: 10,
    paddingHorizontal: 16,
    borderRadius: 8,
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
    gap: 8,
    height: 48,
  },
  sendText: {
    fontSize: 16,
    fontWeight: 600,
    flex: 1,
  },
  disabledButton: {
    backgroundColor: "#4B5563",
  },
  disabledText: {
    color: "#eee",
  },
});

export default SendButton;