Icon Button

"use client";

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

export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
  /** Accessible name, also shown as tooltip. */
  label: string;
  icon: ReactNode;
  /** Icon shown when pressed (toggle mode). */
  pressedIcon?: ReactNode;
  /** Makes it a toggle button (aria-pressed). */
  toggle?: boolean;
  pressed?: boolean;
  defaultPressed?: boolean;
  onPressedChange?: (pressed: boolean) => void;
  /** Tone used when pressed. */
  tone?: "primary" | "danger";
  size?: "md" | "lg";
}

/** Round frosted icon button with tooltip; optional toggle mode (mic/camera style) with a colored pressed state. */
export function IconButton({
  label,
  icon,
  pressedIcon,
  toggle = false,
  pressed,
  defaultPressed = false,
  onPressedChange,
  tone = "primary",
  size = "md",
  className,
  onClick,
  ...rest
}: IconButtonProps) {
  const [inner, setInner] = useState(defaultPressed);
  const on = toggle && (pressed ?? inner);

  return (
    <button
      type="button"
      aria-label={label}
      aria-pressed={toggle ? on : undefined}
      title={label}
      {...rest}
      onClick={(e) => {
        if (toggle) {
          setInner(!on);
          onPressedChange?.(!on);
        }
        onClick?.(e);
      }}
      className={cn(
        "da-focus da-transition group relative grid shrink-0 place-items-center rounded-full shadow-da-sm hover:-translate-y-0.5 disabled:pointer-events-none disabled:opacity-50",
        size === "lg" ? "size-14 [&_svg]:size-6" : "size-11 [&_svg]:size-5",
        on
          ? tone === "danger"
            ? "bg-da-danger text-da-danger-fg"
            : "bg-gradient-to-br from-da-primary to-da-accent text-da-primary-fg"
          : "da-stroke bg-da-surface text-da-fg backdrop-blur-da backdrop-saturate-150 hover:bg-da-secondary",
        className,
      )}
    >
      {on && pressedIcon ? pressedIcon : icon}
      <span
        aria-hidden
        className="da-stroke pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2 rounded-da-pill bg-da-surface px-2.5 py-1 text-xs font-medium whitespace-nowrap text-da-fg opacity-0 shadow-da-sm backdrop-blur-da transition-opacity duration-(--da-duration) group-hover:opacity-100 group-focus-visible:opacity-100"
      >
        {label}
      </span>
    </button>
  );
}

export default IconButton;