import { FC, ReactNode } from 'react'
import { clx } from '../helpers/utils'
import MoonLoader from "react-spinners/ClipLoader"


interface ButtonProps {
    label?: string;
    children?: ReactNode;
    className?: string;
    loading?: boolean;
    onClick?: () => void;
    type?: 'button' | 'submit' | 'reset';
    disabled?: boolean;
    variant?: 'primary' | 'secondary'
}

const Button: FC<ButtonProps> = (props) => {

    const buttonClass = clx(
        'w-full bg-primary text-white cursor-pointer rounded-xl font-normal text-xs md:text-sm h-10 px-3 md:px-4 transition-all duration-200 hover:bg-opacity-90 disabled:opacity-50 disabled:cursor-not-allowed',
        props.variant === 'secondary' && 'bg-[#ECEEF5] text-black',
        props.className
    )

    return (
        <button
            onClick={props.onClick}
            type={props.type || 'button'}
            disabled={props.disabled || props.loading}
            className={buttonClass}
        >
            {props.loading ? (
                <MoonLoader className='mt-1.5' size={15} color={props.variant === 'secondary' ? '#000' : '#fff'} />

            ) : (
                props.children || props.label
            )}
        </button>
    )
}

export default Button