import React from 'react';
import { useRouter } from 'next/navigation';

const Button = ({
  text,
  onClick,
  href,
  className,
  primary,
  icon,
  disabled,
}) => {
  const router = useRouter();
  const baseClass =
    'px-4 py-2 rounded-md text-white h-8 flex items-center justify-center';
  const primaryClass = 'bg-emerald-500 hover:bg-emerald-600';
  const secondaryClass = 'bg-gray-300 hover:bg-gray-400 text-black';
  const buttonClass = `${baseClass} ${primary && !disabled ? primaryClass : secondaryClass} ${className}`;

  const handleClick = (e) => {
    if (href) {
      router.push(href);
    } else if (onClick) {
      onClick(e);
    }
  };

  return (
    <button className={buttonClass} onClick={handleClick} disabled={disabled}>
      {icon && text && <span className="mr-2">{icon}</span>}
      {icon && !text && icon}
      {text}
    </button>
  );
};

export default Button;