import { StyleSheet } 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";

import Button from "@/components/buttons/Button";

const Index = () => {
  const scheme = useColorScheme() ?? 'light';
  return (
    <ThemedView style={styles.container}>
      <ThemedText style={styles.text}>
        Home Screen
      </ThemedText>
      <ThemedView style={styles.footerContainer}>
        <Button width={220} height={60}
          onPress={() => alert('You pressed a button.')}
        >
        <FontAwesome name="picture-o" size={18}
          color={Colors[scheme].background} style={styles.buttonIcon}
        />
        <ThemedText
          style={[
            styles.buttonLabel,
            {color: Colors[scheme].background}
          ]}
        >
          Press this button
        </ThemedText>
        </Button>
      </ThemedView>
    </ThemedView>
  );
}
export default Index;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 24,
  },
  footerContainer: {
    flex: 1 / 3, 
    alignItems: 'center',
  },
  buttonLabel: {
    fontSize: 16,
  },
  buttonIcon: {
    paddingRight: 8,
  },
});