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

interface HeaderTitleProps {
  title: string;
}

const HeaderTitle: FC<HeaderTitleProps> = ({title}) => {
  const {colors} = useHeaderContext();
  const styles = themedStyle();

  return (
    <View style={styles.titleStartContainer}>
      <PlayyText LargeTitle_Condensed style={styles.titleStart}>
        {title}
      </PlayyText>
    </View>
  );
};

const themedStyle = () =>
  StyleSheet.create({
    titleStartContainer: {
      width: '100%',
      justifyContent: 'flex-start',
      alignItems: 'flex-start',
      paddingHorizontal: SPACING_16,
      paddingBottom: SPACING_8,
      paddingTop: 3,
    },
    titleStart: {
      textAlign: 'left',
    },
  });

export default HeaderTitle;