import type { ButtonHTMLAttributes, ReactNode } from "react";
import { cn } from "../../lib/cn";
import { Button, type ButtonTone } from "../button";

export type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  icon: ReactNode;
  label: string;
  tone?: ButtonTone;
};

export function IconButton({
  className,
  icon,
  label,
  tone = "secondary",
  type = "button",
  ...props
}: IconButtonProps) {
  return (
    <Button
      aria-label={label}
      className={cn("w-[var(--uhuru-control-height)] min-w-[var(--uhuru-control-height)]", className)}
      iconOnly
      leadingIcon={icon}
      tone={tone}
      type={type}
      {...props}
    />
  );
}