import { Link } from 'react-router-dom';


interface TextURLProps {
  text: string
  title?: string
  href?: string
  color?: string
  onClick?: () => void
}

function TextURL({ text, href, title, color='clr-text-url', onClick }: TextURLProps) {
  const design = `cursor-pointer hover:underline ${color}`;
  if (href) {
    return (
    <Link tabIndex={-1}
      className={design}
      title={title}
      to={href}
    >
      {text}
    </Link>
    );
  } else if (onClick) {
    return (
    <span tabIndex={-1}
      className={design}
      onClick={onClick}
    >
      {text}
    </span>);
  } else {
    return null;
  }
}

export default TextURL;