import React from 'react';

interface ToolbarButtonProps {
  icon: React.ReactNode;
  label: string;
  onClick: () => void;
  active?: boolean;
  disabled?: boolean;
}

export default function ToolbarButton({
  icon,
  label,
  onClick,
  active = false,
  disabled = false,
}: ToolbarButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      title={label}
      className={`
        relative flex items-center justify-center w-10 h-10 rounded-md transition-all duration-200
        ${disabled 
          ? 'opacity-50 cursor-not-allowed bg-gray-100 text-gray-400' 
          : active 
            ? 'bg-blue-100 text-blue-600 ring-2 ring-blue-500 ring-inset' 
            : 'bg-white text-gray-600 hover:bg-gray-100 hover:text-gray-900 border border-gray-200 shadow-sm'
        }
      `}
    >
      <span className="flex items-center justify-center pointer-events-none">
        {icon}
      </span>
    </button>
  );
}