import { ReactNode } from 'react';
import clsx from 'clsx';

type Variant =
  | 'primary'
  | 'secondary'
  | 'success'
  | 'danger'
  | 'warning'
  | 'info'
  | 'dark';

type Size = 'sm' | 'md' | 'lg';
type Radius = 'sm' | 'md' | 'lg' | 'full';
type StyleType = 'filled' | 'outlined';

type Props = {
  children?: ReactNode;
  onClick?: () => void;
  type?: 'button' | 'submit' | 'reset';
  form?: string;
  variant?: Variant;
  size?: Size;
  radius?: Radius;
  styleType?: StyleType;

  leftIcon?: ReactNode;
  rightIcon?: ReactNode;

  disabled?: boolean;
  isLoading?: boolean;
  className?: string;
};

const Button = ({
  children,
  onClick,
  type = 'button',
  form,
  variant = 'primary',
  size = 'md',
  radius = 'md',
  styleType = 'filled',
  leftIcon,
  rightIcon,
  disabled = false,
  isLoading = false,
  className,
}: Props) => {
  return (
    <button
      type={type}
      form={form}
      onClick={onClick}
      disabled={disabled || isLoading}
      className={clsx(
        'inline-flex items-center justify-center gap-2 font-medium rounded-[10px] cursor-pointer transition-all duration-200 ease-in-out px-[22px] py-[10px] text-[14px]',
        'hover:shadow-lg active:scale-95',

        {
          'px-3 py-1 text-sm': size === 'sm',
          'px-4 py-2 text-base': size === 'md',
          'px-6 py-3 text-lg': size === 'lg',
        },
        {
          'rounded-sm': radius === 'sm',
          'rounded-md': radius === 'md',
          'rounded-lg': radius === 'lg',
          'rounded-full': radius === 'full',
        },
        styleType === 'filled' && {
          'text-white border-0 bg-gradient-to-r from-[#C9974A] to-[#B9803A] hover:opacity-90': variant === 'primary',
          'bg-transparent text-[#9C8C7C] border border-[#ECE2D2] hover:border-[#CF8F42] hover:text-[#CF8F42]': variant === 'secondary',
          'bg-green-600 text-white hover:bg-green-700': variant === 'success',
          'bg-red-600 text-white hover:bg-red-700': variant === 'danger',
          'bg-yellow-500 text-black hover:bg-yellow-600': variant === 'warning',
          'bg-sky-600 text-white hover:bg-sky-700': variant === 'info',
          'bg-black text-white hover:bg-gray-800': variant === 'dark',
        },
        styleType === 'outlined' && {
          'border border-amber-600 text-amber-600 hover:bg-amber-600 hover:text-white':
            variant === 'primary',
          'border border-gray-600 text-gray-600 hover:bg-gray-600 hover:text-white':
            variant === 'secondary',
          'border border-green-600 text-green-600 hover:bg-green-600 hover:text-white':
            variant === 'success',
          'border border-red-600 text-red-600 hover:bg-red-600 hover:text-white':
            variant === 'danger',
          'border border-yellow-500 text-yellow-600 hover:bg-yellow-500 hover:text-black':
            variant === 'warning',
          'border border-sky-600 text-sky-600 hover:bg-sky-600 hover:text-white':
            variant === 'info',
          'border border-black text-black hover:bg-black hover:text-white':
            variant === 'dark',
        },

        (disabled || isLoading) && 'opacity-50 cursor-not-allowed hover:shadow-none',
        className
      )}
    >
      {isLoading && (
        <svg
          className="animate-spin -ml-1 mr-1 h-4 w-4 text-current"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
        >
          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
      )}
      {!isLoading && leftIcon && <span className="flex items-center">{leftIcon}</span>}
      {children}
      {!isLoading && rightIcon && <span className="flex items-center">{rightIcon}</span>}
    </button>
  );
};

export default Button;