import React from 'react';

const detectAndConvertLinks = (text) => {
  // Regular expression to detect URLs
  const urlRegex = /(https?:\/\/[^\s]+)/g;

  // Split the text based on URLs
  const parts = text.split(urlRegex);

  // Check if each part is a URL or not and create appropriate elements
  return parts.map((part, index) => {
    if (part.match(urlRegex)) {
      return (
        <a key={index} href={part} target="_blank" rel="noopener noreferrer">
          {part}
        </a>
      );
    } else {
      return <span key={index}>{part}</span>;
    }
  });
};

export const TextWithLinks = ({ text }) => {
  const textWithLinks = detectAndConvertLinks(text);

  return <div>{textWithLinks}</div>;
};