import { Button } from '#/components/atoms/button.jsx';
import { Link } from '#/components/atoms/link.jsx';
import { cn } from '#/lib/utils.js';

/**
 * A quiet inline link. Navigational ones (given an `href`) render as a real
 * anchor; the rest ("revoke all", "load more", "back") stay buttons, since they
 * act rather than go somewhere. `danger` recolors it for a destructive action.
 */
export function TextLink({
  tone = 'accent',
  href,
  onNavigate,
  className,
  ...props
}) {
  const classes = cn(
    'inline-flex h-auto cursor-pointer items-center gap-1.5 whitespace-nowrap p-0 font-bold text-[13px] no-underline hover:no-underline',
    tone === 'danger'
      ? 'text-destructive hover:text-destructive/80'
      : 'text-key hover:text-foreground',
    className,
  );
  return href ? (
    <Link href={href} onNavigate={onNavigate} className={classes} {...props} />
  ) : (
    <Button variant="link" className={cn('gap-1.5', classes)} {...props} />
  );
}