import { textReplacer, ReplaceData } from '@solariera/text-replacer';

const sample: ReplaceData = {
  _format: 'I am {name}. I live in {address}.',
  _replacers: {
    name: { _text: 'Tom', _options: { color: '#0463ff' } },
    address: {
      _format: '{city}, {country}',
      _replacers: {
        city: { _text: 'N.Y.' },
        country: { _text: 'U.S.A', _options: { color: '#0463ff' } },
      },
      _options: { color: '#ff0463' },
    },
  },
};

function App() {
  const text = textReplacer(sample);
  // [
  //   { _options: undefined, _text: 'I am' },
  //   { _text: ' ', _options: undefined },
  //   { _options: { color: '#0463ff' }, _text: 'Tom' },
  //   { _text: '. ', _options: undefined },
  //   { _text: 'I live in ', _options: undefined },
  //   { _options: { color: '#ff0463' }, _text: 'N.Y.' },
  //   { _text: ', ', _options: { color: '#ff0463' } },
  //   { _options: { color: '#0463ff' }, _text: 'U.S.A' },
  //   { _text: '.', _options: undefined },
  // ];

  const colored = text.map((data, index) => {
    const { _text, _options } = data;
    if (_options)
      return (
        <span style={{ ..._options }} key={index}>
          {_text}
        </span>
      );
    return <span key={index}>{_text}</span>;
  });

  return (
    <div className="App">
      <span>{colored}</span>
    </div>
  );
}

export default App;