import type { ButtonHTMLAttributes, ReactNode } from "react";
import { createNodedcAccentStyleVars, type RgbTuple } from "../lib/accentContrast";
import { cn } from "../lib/cn";

export type ButtonVariant = "primary" | "secondary" | "danger" | "ghost" | "accent";
export type ButtonSurface = "default" | "modal";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant;
  surface?: ButtonSurface;
  accentRgb?: RgbTuple;
  icon?: ReactNode;
}

export function Button({
  variant = "secondary",
  surface = "default",
  accentRgb,
  icon,
  className,
  children,
  style,
  ...props
}: ButtonProps) {
  const accentStyle = accentRgb
    ? createNodedcAccentStyleVars(accentRgb, "--nodedc-button-accent-rgb", "--nodedc-button-on-accent-rgb")
    : undefined;

  return (
    <button
      className={cn("button", `button--${variant}`, className)}
      data-surface={surface}
      style={accentStyle ? { ...accentStyle, ...style } : style}
      {...props}
    >
      {icon}
      {children ? <span>{children}</span> : null}
    </button>
  );
}

interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  label: string;
}

export function IconButton({ label, className, children, ...props }: IconButtonProps) {
  return (
    <button className={cn("icon-button", className)} aria-label={label} title={label} {...props}>
      {children}
    </button>
  );
}
