import React, {FC, ReactNode} from 'react';
import {StyleSheet, View, ViewStyle} from 'react-native';
import {SPACING_16} from '../Spacing/Spacing';
import {useHeaderContext} from './Header';

interface HeaderRowProps {
  children: ReactNode;
  rowStyle?: ViewStyle;
}

const HeaderRow: FC<HeaderRowProps> = ({children, rowStyle}) => {
  const {colors} = useHeaderContext();
  const styles = themedStyle();

  return <View style={[styles.headerRow, rowStyle]}>{children}</View>;
};

const themedStyle = () =>
  StyleSheet.create({
    headerRow: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingLeft: SPACING_16,
      paddingRight: SPACING_16,
      paddingVertical: 11,
    },
  });

export default HeaderRow;