import clsx from "clsx";
import type { AnchorHTMLAttributes, ReactNode } from "react";
import {
  buttonClass,
  iconButtonClass,
  type ButtonSize,
  type ButtonVariant,
  type IconButtonSize,
  type IconButtonVariant,
} from "./buttonStyles";

// A link that looks like a button (a download, a sign-in that leaves the app). It stays an <a> — the
// browser's own open-in-new-tab, copy-link and download behaviour, and the right role for a screen
// reader — and wears the `Button` / `IconButton` face from buttonStyles, so it can't drift from the
// buttons beside it. A link in a sentence is a plain `<a>` (or `Button variant="link"` for an action).

type Anchor = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "className" | "children">;

export function LinkButton({
  variant = "outline",
  size = "md",
  icon,
  fullWidth,
  className,
  children,
  ...rest
}: Anchor & {
  variant?: ButtonVariant;
  size?: ButtonSize;
  /** Leading icon (a lucide element; sized here). */
  icon?: ReactNode;
  fullWidth?: boolean;
  className?: string;
  children: ReactNode;
}) {
  return (
    <a className={clsx(buttonClass({ variant, size, fullWidth }), className)} {...rest}>
      {icon}
      {children}
    </a>
  );
}

/** The glyph-only form: `label` is the accessible name and the tooltip, as on `IconButton`. */
export function IconLink({
  label,
  variant = "ghost",
  size = "sm",
  className,
  children,
  ...rest
}: Anchor & {
  label: string;
  variant?: IconButtonVariant;
  size?: IconButtonSize;
  className?: string;
  children: ReactNode;
}) {
  return (
    <a
      aria-label={label}
      title={label}
      className={clsx(iconButtonClass({ variant, size }), className)}
      {...rest}
    >
      {children}
    </a>
  );
}