import React from 'react';
import {Text, View, StyleSheet, ViewProps} from 'react-native';
interface CaptionScreenHeaderProps extends ViewProps {
  title: string;
}
const CaptionScreenHeader: React.FC<CaptionScreenHeaderProps> = ({
  title,
  style,
}) => {
  return (
    <View style={[styles.container, style]}>
      <View style={styles.headerContainer}>
        <Text style={styles.header}>{title}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    height: '5%',
  },
  headerContainer: {
    position: 'absolute',
    left: '50%',
  },
  header: {
    position: 'relative',
    right: '50%',
    fontSize: 20,
    fontWeight: 'bold',
    color: 'white',
  },
});
export default CaptionScreenHeader;