import Link from "next/link";
import * as React from "react";

type ButtonVariant = "primary" | "secondary";

type ButtonLinkProps = {
  readonly href: string;
  readonly children: React.ReactNode;
  readonly variant?: ButtonVariant;
  readonly className?: string;
};

const BASE =
  "inline-flex items-center justify-center rounded-md px-5 py-2.5 text-sm font-semibold transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent";

const VARIANTS: Record<ButtonVariant, string> = {
  primary: "bg-accent !text-accent-fg hover:bg-accent-hover",
  secondary:
    "border border-border-strong !text-fg hover:border-muted hover:bg-surface",
};

export const ButtonLink: React.FC<ButtonLinkProps> = ({
  href,
  children,
  variant = "primary",
  className = "",
}) => (
  <Link href={href} className={`${BASE} ${VARIANTS[variant]} ${className}`}>
    {children}
  </Link>
);