type IconButtonProps = {
  label: string;
  children: React.ReactNode;
  onClick?: () => void;
  active?: boolean;
};

export function IconButton({ label, children, onClick, active = false }: IconButtonProps) {
  return (
    <button
      type="button"
      aria-label={label}
      title={label}
      onClick={onClick}
      className={`grid h-10 w-10 place-items-center rounded border transition ${
        active
          ? "border-slate-800 bg-slate-900 text-white"
          : "surface-control border-transparent text-slate-700 hover:bg-white"
      }`}
    >
      {children}
    </button>
  );
}