import { cn } from "../utils/cn.ts";

interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
  variant?: "default" | "ghost";
  size?: "sm" | "md";
}

export function IconButton({ children, variant = "ghost", size = "md", className, ...props }: IconButtonProps) {
  const sizeClasses = {
    sm: "p-0.5",
    md: "p-1",
  };

  const variantClasses = variant === "ghost"
    ? "text-zinc-600 hover:text-zinc-400 hover:bg-zinc-800"
    : "text-zinc-400 hover:text-zinc-300 hover:bg-zinc-800";

  return (
    <button
      type="button"
      className={cn(
        "rounded transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
        sizeClasses[size],
        variantClasses,
        className
      )}
      {...props}
    >
      {children}
    </button>
  );
}