import React from 'react';
import {TouchableOpacity, TouchableOpacityProps} from 'react-native';
import Text from '@components/Text';

import {styles} from './styles';

interface Props {
  onPress?: TouchableOpacityProps['onPress'];
  selected?: boolean;
  text: Nullable<string>;
}

function HeaderOption({onPress, selected, text}: Props) {
  const borderBottomWidth = selected ? 2 : 0;
  return (
    <TouchableOpacity
      onPress={onPress}
      style={[styles.tabContainer, {borderBottomWidth}]}>
      <Text variant="subtitle2" style={styles.segmentationText}>
        {text}
      </Text>
    </TouchableOpacity>
  );
}

export default HeaderOption;