import React, { useMemo } from 'react';
import { searchText } from '../../../utils/searchText';
import { Text } from '../../Text';

export const SearchedText = ({
  text,
  search,
}: {
  text: string;
  search?: string;
}) => {
  const { rightText, highlightedText, leftText } = useMemo(
    () => searchText(text, search),
    [text, search]
  );

  return (
    <Text
      variant={'mediumBody'}
      color="yankeesBlue"
      marginBottom={'spacing-xxs'}
      numberOfLines={1}
      fontFamily={'CaustenRound-Bold'}
    >
      {rightText}
      {highlightedText && (
        <Text
          variant={'mediumBody'}
          color="yankeesBlue"
          fontFamily={'CaustenRound-Regular'}
        >
          {highlightedText}
        </Text>
      )}
      {leftText}
    </Text>
  );
};