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

interface TextURLProps {
  /** Text to display. */
  text: string;

  /** Tooltip for the link. */
  title?: string;

  /** URL to link to. */
  href?: string;

  /** Color of the link. */
  color?: string;

  /** Callback to be called when the link is clicked. */
  onClick?: () => void;
}

/**
 * Displays a text with a clickable link.
 */
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 (
      <button type='button' tabIndex={-1} className={design} onClick={onClick}>
        {text}
      </button>
    );
  } else {
    return null;
  }
}

export default TextURL;