import { Link } from "react-router";
import { useTextScramble } from "../hooks/useTextScramble";

interface RewriteLinkProps {
  to?: string;
  href?: string;
  children: string;
  disabled?: boolean;
  external?: boolean;
  className?: string;
}

export function RewriteLink({
  to,
  href,
  children,
  disabled = false,
  external = false,
  className = "",
}: RewriteLinkProps) {
  const { displayText, scramble, reset } = useTextScramble(children);

  const baseClass = `rewrite-link ${className}`;

  if (disabled) {
    return (
      <span
        className={baseClass}
        aria-disabled="true"
        onMouseEnter={scramble}
        onMouseLeave={reset}
      >
        {displayText}
      </span>
    );
  }

  if (external || href) {
    return (
      <a
        href={href || to}
        target="_blank"
        rel="noopener noreferrer"
        className={baseClass}
        onMouseEnter={scramble}
        onMouseLeave={reset}
      >
        {displayText}
      </a>
    );
  }

  return (
    <Link
      to={to || "/"}
      className={baseClass}
      onMouseEnter={scramble}
      onMouseLeave={reset}
    >
      {displayText}
    </Link>
  );
}