import type { ComponentProps, ReactNode } from "react"
import { Button } from "./button.tsx"
import { cn } from "./utils.ts"

export type ActionButtonProps = Readonly<{
  label: string
  icon: ReactNode
  appearance?: "plain" | "floating"
  size?: "sm" | "default"
  pressed?: ComponentProps<typeof Button>["aria-pressed"]
  disabled?: boolean
  className?: string
  tabIndex?: number
}> &
  Omit<
    ComponentProps<typeof Button>,
    | "aria-label"
    | "aria-pressed"
    | "children"
    | "className"
    | "disabled"
    | "size"
    | "title"
    | "variant"
  >

/** Shared accessible icon action for React-owned PathMX Plugin surfaces. */
export function ActionButton({
  label,
  icon,
  appearance = "plain",
  size = "default",
  pressed,
  disabled,
  className,
  tabIndex,
  ...props
}: ActionButtonProps) {
  return (
    <Button
      type="button"
      variant="ghost"
      size={size === "sm" ? "icon-sm" : "icon"}
      data-slot="action-button"
      data-appearance={appearance}
      data-variant={appearance === "floating" ? "floating" : "ghost"}
      aria-label={label}
      aria-pressed={pressed}
      title={label}
      disabled={disabled}
      tabIndex={tabIndex}
      className={cn("pmx-ui-action-button", className)}
      {...props}
    >
      {icon}
    </Button>
  )
}