import React from 'react';
import { useNavigate } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

export function ToolbarButton({ icon, label, onClick, navigateTo, navigateBack = false, active = false }) {
  const navigate = useNavigate();

  const handleClick = () => {
    if (navigateBack) {
      navigate(-1, { replace: true });
    } else if (navigateTo) {
      navigate(navigateTo, { replace: true });
    } else if (onClick) {
      onClick();
    }
  };

  return (
    <button
      onClick={handleClick}
      className={`
        flex items-center gap-2 px-4 py-2 rounded-lg transition-colors
        ${active 
          ? 'bg-green-600 text-white' 
          : 'text-gray-300 hover:text-green-600'
        }
      `}
    >
      <FontAwesomeIcon icon={icon} />
      {label && <span>{label}</span>}
    </button>
  );
}