import React from 'react';
import Link from 'next/link';
import classNames from 'classnames';

type ButtonProps = {
  label?: string | React.ReactNode; 
  href?: string;
  onClick?: () => void;
  variant?: 'primary' | 'secondary' | 'outline' | 'fadoutline' | 'cancel';
  icon?: React.ReactNode;
  className?: string;
  hiddenOn?: 'hiddenOnMobile' | 'visible';
  type?: 'button' | 'submit' | 'reset';
  children?: React.ReactNode;
  disabled?: boolean;
};

const Button: React.FC<ButtonProps> = ({
  label,
  href,
  onClick,
  variant = 'primary',
  icon,
  className = '',
  hiddenOn = 'visible',
  type = 'button',
  children,
  disabled = false,
}) => {
  const baseClasses =
    'relative flex items-center gap-2 px-4 py-2.5 text-base rounded-lg transition-all duration-300 cursor-pointer max-md:text-sm overflow-hidden group rtl:flex-row-reverse';

  const variants: Record<string, string> = {
    primary: 'text-white bg-primary400 hover:bg-primary300 hover:shadow-lg hover:shadow-primary400/30 active:translate-y-0 active:shadow-md font-semibold focus:ring-2 focus:ring-primary400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:-translate-x-full hover:before:translate-x-full before:transition-transform before:duration-700',
    
    secondary: 'text-white bg-primary500 hover:bg-primary600 hover:shadow-lg hover:shadow-primary500/30 active:translate-y-0 active:shadow-md dark:bg-primary400 dark:hover:bg-primary300 dark:hover:shadow-primary400/30 focus:ring-2 focus:ring-primary500 focus:ring-offset-2 dark:focus:ring-primary400 dark:focus:ring-offset-gray-900 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:-translate-x-full hover:before:translate-x-full before:transition-transform before:duration-700',
    
    outline: 'border text-nowrap border-primary500 text-primary500 hover:bg-primary500 hover:text-white hover:shadow-lg hover:shadow-primary500/30 active:translate-y-0 font-medium duration-300 dark:border-primary400 dark:text-primary400 dark:hover:bg-primary400 dark:hover:text-white dark:hover:shadow-primary400/30 focus:ring-2 focus:ring-primary500 focus:ring-offset-2 dark:focus:ring-primary400 dark:focus:ring-offset-gray-900 after:absolute after:inset-0 after:border-2 after:border-primary500 dark:after:border-primary400 after:rounded-lg after:scale-100 after:opacity-0 hover:after:scale-110 hover:after:opacity-100 after:transition-all after:duration-300',
    
    fadoutline: 'border text-nowrap border-neutrals100 text-primary500 hover:bg-primary500 hover:text-white hover:border-primary500 hover:shadow-lg hover:shadow-primary500/30 active:translate-y-0 font-medium duration-300 dark:text-primary400 dark:border-darkborder dark:hover:bg-primary400 dark:hover:text-white dark:hover:border-primary400 dark:hover:shadow-primary400/30 focus:ring-2 focus:ring-primary500 focus:ring-offset-2 dark:focus:ring-primary400 dark:focus:ring-offset-gray-900 before:absolute before:inset-0 before:bg-gradient-to-t before:from-primary500/10 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300 dark:before:from-primary400/10',
    
    cancel: 'text-white border border-kzred600 bg-kzred600 hover:bg-white hover:text-kzred600 hover:shadow-lg hover:shadow-kzred600/30 active:translate-y-0 active:shadow-md font-normal dark:hover:bg-red-100 focus:ring-2 focus:ring-kzred600 focus:ring-offset-2 dark:focus:ring-offset-gray-900 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/30 before:to-transparent before:-translate-x-full hover:before:translate-x-full before:transition-transform before:duration-700',
  };

  const disabledClasses = 'opacity-50 cursor-not-allowed hover:transform-none hover:shadow-none pointer-events-none';

  const visibility: Record<string, string> = {
    hiddenOnMobile: 'hidden md:flex',
    visible: '',
  };

  const combinedClasses = classNames(
    baseClasses,
    variants[variant],
    visibility[hiddenOn],
    disabled && disabledClasses,
    className
  );

  const content = (
    <>
      <span className="relative z-10 transition-transform duration-300">
        {label}
      </span>
      {icon && (
        <div className="rtl:rotate-180 relative z-10 transition-transform duration-300">
          {icon}
        </div>
      )}
    </>
  );

  return href ? (
    <Link href={href} className={combinedClasses}>
      {content}
    </Link>
  ) : (
    <button 
      className={combinedClasses} 
      onClick={onClick} 
      type={type} 
      disabled={disabled}
    >
      {content}
      {children}
    </button>
  );
};

export default Button;