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 = ({ 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 };