import type { ReactNode } from "react";

/** `<x-btn>`: an anchor when it has an href, a button otherwise. */
export default function Btn({
  href,
  variant = "outline",
  className,
  target,
  rel,
  type = "button",
  children,
}: {
  href?: string | null;
  variant?: "outline" | "fill";
  className?: string;
  target?: string | null;
  rel?: string | null;
  type?: "button" | "submit";
  children: ReactNode;
}) {
  const classes = ["btn", variant === "fill" ? "btn--fill" : "", className].filter(Boolean).join(" ");

  if (href) {
    return (
      <a className={classes} href={href} target={target ?? undefined} rel={rel ?? undefined}>
        {children}
      </a>
    );
  }

  return (
    <button className={classes} type={type}>
      {children}
    </button>
  );
}