import React, {ReactNode} from 'react';
import {View} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {Divider} from '@components';
import {useTheme} from '@shared/theme';

import {Back} from './components/Back';
import {GroupOptions} from './components/GroupOptions';
import {Title} from './components/Title';
import {styles} from './styles';

interface Props {
  children: ReactNode;
}

function GroupHeader({children}: Props) {
  const {theme} = useTheme();
  const {top} = useSafeAreaInsets();
  return (
    <>
      <View
        style={[
          styles.container,
          {backgroundColor: theme.background.elements.default, paddingTop: top},
        ]}>
        {children}
      </View>
      <Divider />
    </>
  );
}

GroupHeader.Back = Back;
GroupHeader.Title = Title;
GroupHeader.GroupOptions = GroupOptions;

export default GroupHeader;