import { ButtonHTMLAttributes, FC, memo, ReactNode } from 'react'
import ReactLoading from 'react-loading'
import { XOR } from '../helpers/types'
import { clx } from '../helpers/utils'
type Props = {
    className?: string;
    isLoading?: boolean,
} & ButtonHTMLAttributes<HTMLButtonElement> &
    XOR<{ children: ReactNode }, { label: string, icon?: string, isLoading?: boolean }>;
const Button: FC<Props> = memo((props: Props) => {
    const buttonClass = clx(
        'flex rounded-xl items-center justify-center text-center h-10 text-sm  bg-primary text-white w-full',
        props.disabled && 'cursor-not-allowed opacity-30',
        props.className
    );
    return (
        <button {...props} className={`${buttonClass} ${props.className}`} >
            <img src={props.icon} alt="" />
            {
                props.isLoading ?
                    <ReactLoading type='spin' color={'white'} width={20} height={20} />
                    :
                    props.label || props.children
            }
        </button>
    )
})
export default Button