import React from 'react'
import { View, Text } from 'react-native'
import { Styles, TextStyles } from '../Styles'
import { colors } from '../Colors'

export const TextBar: React.FC<{
  text: string
}> = ({ text }) => {
  return (
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingVertical: 12,
        borderTopColor: colors.midGray,
        borderTopWidth: 1,
        ...Styles.screenHorizontalPaddingWithNegation,
      }}
    >
      <Text
        style={[
          TextStyles.tiny,
          { color: colors.lightGray, textTransform: 'capitalize' },
        ]}
      >
        {text}
      </Text>
    </View>
  )
}