import type { ButtonHTMLAttributes, AnchorHTMLAttributes, ReactNode } from "react";

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

type BaseProps = {
  children: ReactNode;
  className?: string;
  tone?: ButtonTone;
};

type NativeButtonProps = BaseProps &
  ButtonHTMLAttributes<HTMLButtonElement> & {
    href?: never;
  };

type AnchorButtonProps = BaseProps &
  AnchorHTMLAttributes<HTMLAnchorElement> & {
    href: string;
  };

export type ButtonProps = NativeButtonProps | AnchorButtonProps;

const tones: Record<ButtonTone, string> = {
  primary: "border-accent bg-accent text-bg hover:bg-accent-hover",
  secondary: "border-border bg-surface-raised text-fg hover:border-border-light hover:bg-surface-hover",
  ghost: "border-transparent bg-transparent text-cyan hover:border-border-light hover:bg-surface",
};

export function Button({ children, className = "", tone = "secondary", ...props }: ButtonProps) {
  const classes = [
    "inline-flex min-h-10 cursor-pointer items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-semibold transition-colors duration-150 disabled:cursor-not-allowed disabled:opacity-55",
    tones[tone],
    className,
  ]
    .filter(Boolean)
    .join(" ");

  if ("href" in props) {
    const anchorProps = props as Omit<AnchorButtonProps, keyof BaseProps>;

    return (
      <a className={classes} {...anchorProps}>
        {children}
      </a>
    );
  }

  const buttonProps = props as Omit<NativeButtonProps, keyof BaseProps>;

  return (
    <button className={classes} {...buttonProps}>
      {children}
    </button>
  );
}
