import Link from "next/link";
import { ButtonHTMLAttributes, ReactNode } from "react";

type Variant = "primary" | "outline" | "outlineInverse";

const base =
  "inline-flex items-center gap-2 rounded-full px-6 py-3.5 text-[15px] font-bold transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-teal focus-visible:ring-offset-2";

const variants: Record<Variant, string> = {
  primary: "bg-teal text-ink hover:brightness-95",
  outline: "bg-transparent text-ink border border-neutral-400 hover:bg-neutral-100",
  // Used on dark sections, where a near-black border/text would disappear
  // against the near-black background.
  outlineInverse: "bg-transparent text-white border border-white/30 hover:bg-white/5"
};

interface CommonProps {
  variant?: Variant;
  children: ReactNode;
  className?: string;
}

export function ButtonLink({
  href,
  variant = "primary",
  children,
  className = ""
}: CommonProps & { href: string }) {
  return (
    <Link href={href} className={`${base} ${variants[variant]} ${className}`}>
      {children}
    </Link>
  );
}

export function Button({
  variant = "primary",
  children,
  className = "",
  ...rest
}: CommonProps & ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button className={`${base} ${variants[variant]} ${className}`} {...rest}>
      {children}
    </button>
  );
}