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


type ButtonBaseProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children'>

interface ButtonProps extends ButtonBaseProps {
    label?: string
    children?: ReactNode
    className?: string
    loading?: boolean
    variant?: 'primary' | 'secondary'
}

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

    const { label, children, className, loading, variant, type, disabled, ...rest } = props

    const buttonClass = clx(
        'w-full 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',
        variant === 'secondary'
            ? 'bg-secondary text-secondary-foreground'
            : 'bg-primary text-primary-foreground',
        className
    )

    return (
        <button
            type={type || 'button'}
            disabled={disabled || loading}
            className={buttonClass}
            {...rest}
        >
            {loading ? (
                <MoonLoader className='mt-1.5' size={15} color={'currentColor'} />

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

export default Button