Icon Button

import React from "@rbxts/react";
import { useTheme } from "@robloxui/theme";

interface IconButtonProps {
  icon: string;
  onClick: () => void;
  tooltip?: string;
  size?: number;
}

export function IconButton({ icon, onClick, tooltip, size = 24 }: IconButtonProps) {
  const { colors } = useTheme();

  return (
    <imagebutton
      Image={icon}
      BackgroundTransparency={1}
      Size={new UDim2(0, size + 16, 0, size + 16)}
      AutoButtonColor={true}
      Event={{ Activated: onClick }}
    >
      <imagelabel
        Image={icon}
        Size={new UDim2(0, size, 0, size)}
        Position={new UDim2(0.5, 0, 0.5, 0)}
        AnchorPoint={new Vector2(0.5, 0.5)}
        BackgroundTransparency={1}
        ImageColor3={colors.textSecondary}
      />
    </imagebutton>
  );
}