Icon Button

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

export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
  /** Accessible name (also shown as native tooltip). */
  label: string;
  icon: ReactNode;
  tone?: "neutral" | "peach" | "mint" | "lavender" | "butter" | "primary";
  size?: "sm" | "md" | "lg";
  /** Small counter bubble. */
  count?: number;
}

const TONES = {
  neutral: "bg-da-surface text-da-fg shadow-da-sm hover:bg-da-surface-2",
  peach: "bg-da-accent text-da-accent-fg",
  mint: "bg-da-secondary text-da-secondary-fg",
  lavender: "bg-da-primary/12 text-da-primary",
  butter: "bg-da-warning/30 text-da-fg",
  primary: "bg-da-primary text-da-primary-fg shadow-da-sm",
} 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 pastel icon button in six tones and three sizes, with an optional counter bubble and a springy press. */
export function IconButton({ label, icon, tone = "neutral", size = "md", count, className, ...rest }: IconButtonProps) {
  return (
    <button
      type="button"
      aria-label={count ? `${label} (${count})` : label}
      title={label}
      {...rest}
      className={cn(
        "da-focus relative grid shrink-0 place-items-center rounded-full transition-[scale,background-color] duration-(--da-duration) ease-da-emphasized hover:scale-105 active:scale-95 disabled:opacity-50",
        TONES[tone],
        SIZES[size],
        className,
      )}
    >
      {icon}
      {count !== undefined && count > 0 && (
        <span
          aria-hidden
          className="absolute -top-1 -right-1 grid h-5 min-w-5 place-items-center rounded-full bg-da-danger px-1 text-[11px] font-bold text-da-danger-fg ring-2 ring-da-bg"
        >
          {count > 99 ? "99+" : count}
        </span>
      )}
    </button>
  );
}

export default IconButton;