import React from 'react';

export interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'outline' | 'danger' | 'amber' | 'emerald' | 'menu' | 'menuActive';
  size?: 'sm' | 'md' | 'lg';
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
  href?: string;
  target?: string;
  rel?: string;
  className?: string;
  children?: React.ReactNode;
  onClick?: React.MouseEventHandler<any>;
  disabled?: boolean;
  type?: 'button' | 'submit' | 'reset';
  id?: string;
}

export const Button: React.FC<ButtonProps> = ({
  children,
  variant = 'primary',
  size = 'md',
  leftIcon,
  rightIcon,
  href,
  target,
  rel,
  className = '',
  onClick,
  disabled,
  type = 'button',
  id,
}) => {
  const baseStyle = 'inline-flex items-center justify-center gap-1.5 font-bold rounded-lg transition-colors cursor-pointer shrink-0 outline-none';

  const variants = {
    primary: 'bg-orange-500 hover:bg-orange-600 active:bg-orange-700 text-white border border-transparent',
    secondary: 'bg-slate-100 hover:bg-slate-200 active:bg-slate-300 text-slate-800 border border-transparent',
    outline: 'bg-white hover:bg-slate-50 active:bg-slate-100 text-slate-600 hover:text-slate-900 border border-slate-200/85',
    danger: 'bg-red-500 hover:bg-red-600 active:bg-red-700 text-white border border-transparent',
    amber: 'bg-amber-50 hover:bg-amber-100 active:bg-amber-200/60 text-amber-800 border border-amber-200/50',
    emerald: 'bg-emerald-50 hover:bg-emerald-100 active:bg-emerald-200/60 text-emerald-800 border border-emerald-200/50',
    menu: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900 border border-transparent !justify-start w-full bg-transparent font-semibold !text-base',
    menuActive: 'text-orange-600 border border-transparent !justify-start w-full font-semibold !text-base',
  };

  const sizes = {
    sm: 'px-2 py-1.5 text-xs',
    md: 'px-3 py-2 text-sm',
    lg: 'px-4 py-2.5 text-base',
  };

  const combinedClassName = `${baseStyle} ${variants[variant]} ${sizes[size]} ${className}`;

  if (href) {
    return (
      <a
        href={href}
        target={target}
        rel={rel}
        className={combinedClassName}
        onClick={onClick}
        id={id}
      >
        {leftIcon && <span className="shrink-0">{leftIcon}</span>}
        {children}
        {rightIcon && <span className="shrink-0">{rightIcon}</span>}
      </a>
    );
  }

  return (
    <button
      className={combinedClassName}
      type={type}
      onClick={onClick}
      disabled={disabled}
      id={id}
    >
      {leftIcon && <span className="shrink-0">{leftIcon}</span>}
      {children}
      {rightIcon && <span className="shrink-0">{rightIcon}</span>}
    </button>
  );
};