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

/**
 * A link that reads as a button. It routes the way a Link does and takes the
 * variant and size a Button takes, so a way to another page and an action on
 * this one stand in the same row at the same height. `external` draws a plain
 * anchor instead, for an address outside the app.
 */
export function ButtonLink({
  variant = 'outline',
  size = 'sm',
  external = false,
  className,
  href,
  ...props
}) {
  const classes = cn(
    buttonVariants({ variant, size }),
    'text-foreground no-underline hover:no-underline',
    variant === 'default' && 'text-primary-foreground',
    variant === 'link' && 'text-key',
    className,
  );
  if (external) {
    return <a href={href} className={classes} {...props} />;
  }
  return <Link href={href} className={classes} {...props} />;
}