import { StyleSheet, Pressable } from "react-native";
import { ThemedText } from "@/components/ThemedText";
import { ThemedView } from "@/components/ThemedView";
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import FontAwesome from "@expo/vector-icons/FontAwesome";

type Props = {
  label: string;
  theme?: 'primary';
  onPress?: () => void;
};

const Button = ({ label, theme, onPress }: Props) => {
  const scheme = useColorScheme() ?? 'light';
  if (theme === 'primary') {
    return (
      <ThemedView style={styles.buttonContainer}>
        <Pressable
          style={[
            styles.button,
            {backgroundColor: Colors[scheme].text}
          ]}
          onPress={() => alert('You pressed a button.')}
        >
          <ThemedText
            style={[
              styles.buttonLabel,
              {color: Colors[scheme].background}
            ]}
          >
            {label}
          </ThemedText>
        </Pressable>
      </ThemedView>
    );
  } else {
    return (
      <ThemedView style={styles.buttonContainer}>
        <Pressable
          style={[
            styles.button,
            {backgroundColor: Colors[scheme].text}
          ]}
          onPress={() => alert('You pressed a button.')}
        >
          <ThemedText
            style={[
              styles.buttonLabel,
              {color: Colors[scheme].background}
            ]}
          >
            {label}
          </ThemedText>
        </Pressable>
      </ThemedView>
    );
  }
};
export default Button;

const styles = StyleSheet.create({
  buttonContainer: {
    width: 320,
    height: 68,
    marginHorizontal: 20,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 3,
  },
  button: {
    borderRadius: 10,
    width: '100%',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
  },
  buttonIcon: {
    paddingRight: 8,
  },
  buttonLabel: {
    fontSize: 16,
  },
});