import { PropsWithChildren } from "react";
import { Text, View, useColorScheme } from "react-native";
import { Colors } from "react-native/Libraries/NewAppScreen";

import styles from "../styles/stylesheet";

type SectionProps = PropsWithChildren<{
  title: string;
}>;

const Section = ({ children, title }: SectionProps): React.JSX.Element => {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
        <Text style={styles.sectionDescription} />
      </Text>
    </View>
  );
};

export { Section };