Icon Button

import type { ButtonHTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  /** Required accessible name. */
  label: string;
  icon: ReactNode;
  variant?: "soft" | "primary" | "cream" | "ghost";
  size?: "sm" | "md" | "lg";
}

const VARIANTS = {
  soft: "bg-da-accent text-da-accent-fg hover:brightness-95",
  primary: "bg-da-primary text-da-primary-fg hover:bg-da-primary/90",
  cream: "bg-da-surface text-da-surface-fg shadow-da-sm hover:shadow-da-md",
  ghost: "text-da-muted-fg hover:bg-da-surface-2 hover:text-da-fg",
} as const;
const SIZES = { sm: "size-9 [&_svg]:size-4", md: "size-11 [&_svg]:size-5", lg: "size-14 [&_svg]:size-6" } as const;

/** Round icon-only button in soft sage, sage, cream (with shadow) or ghost; required label used for aria-label and title. */
export function IconButton({ label, icon, variant = "soft", size = "md", className, type = "button", ...rest }: IconButtonProps) {
  return (
    <button
      type={type}
      aria-label={label}
      title={label}
      className={cn(
        "da-focus da-transition inline-grid shrink-0 place-items-center rounded-full disabled:opacity-50",
        VARIANTS[variant],
        SIZES[size],
        className,
      )}
      {...rest}
    >
      {icon}
    </button>
  );
}

export default IconButton;