import type { ReactNode } from "react";
import type { LinkProps } from "react-router-dom";
import { Link } from "react-router-dom";
import { useButtonProps } from "./Button";

type ButtonTone = "primary" | "secondary" | "ghost";

type ButtonAsLinkProps = LinkProps & {
  children: ReactNode;
  className?: string;
  tone?: ButtonTone;
  /** Accessible label for screen readers (overrides children text) */
  "aria-label"?: string;
  /** Indicates if this button is part of a larger grouping */
  "aria-haspopup"?: boolean | "menu" | "listbox" | "tree" | "grid" | "dialog";
  /** Identifies the element controlled by this button */
  "aria-controls"?: string;
  /** Identifies the expanded state (for toggle buttons) */
  "aria-expanded"?: boolean;
  /** Identifies the pressed state (for toggle buttons) */
  "aria-pressed"?: boolean;
  /** Keyboard navigation: explicit tab index */
  tabIndex?: number;
};

/**
 * Button component rendered as a React Router Link.
 *
 * Use this when you need button styling with React Router navigation.
 * For external links, use the regular Button component with an `href` prop.
 *
 * @example
 * import { ButtonAsLink } from "@void-nav/ui";
 *
 * <ButtonAsLink to="/docs" tone="primary">Go to Docs</ButtonAsLink>
 */
export function ButtonAsLink({ children, className = "", tone = "secondary", ...props }: ButtonAsLinkProps) {
  const classes = useButtonProps(tone, className);

  // Extract accessibility props to spread on the rendered element
  const { "aria-label": ariaLabel, "aria-haspopup": ariaHaspopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-pressed": ariaPressed, tabIndex, to, ...restProps } = props;
  const ariaProps = { "aria-label": ariaLabel, "aria-haspopup": ariaHaspopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-pressed": ariaPressed, tabIndex };

  return (
    <Link className={classes} to={to} {...restProps} {...ariaProps}>
      {children}
    </Link>
  );
}
