import type { AnchorHTMLAttributes } from "react";
import { cn } from "../../lib/cn";

export type LinkButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
  tone?: "primary" | "secondary";
};

export function LinkButton({
  children,
  className,
  tone = "secondary",
  ...props
}: LinkButtonProps) {
  return (
    <a
      className={cn(
        "inline-flex h-[var(--uhuru-control-height)] items-center justify-center rounded-[var(--uhuru-radius-control)] border px-[var(--uhuru-control-padding-x)] text-sm font-medium no-underline transition",
        tone === "primary"
          ? "bg-[var(--uhuru-action-primary)] text-[var(--uhuru-text-inverse)] hover:bg-[var(--uhuru-action-primary-hover)]"
          : "bg-[var(--uhuru-surface-default)] text-[var(--uhuru-text-primary)] hover:bg-[var(--uhuru-surface-muted)]",
        className,
      )}
      {...props}
    >
      {children}
    </a>
  );
}