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

type Props = {
    className?: string;
    isLoading?: boolean;
    percentage?: number;
} & ButtonHTMLAttributes<HTMLButtonElement> &
    XOR<{ children: ReactNode }, { label: string }>;

const Button: FC<Props> = memo((props) => {
    const { isLoading, percentage, label, children, className, ...rest } = props;

    const buttonClass = clx(
        'flex rounded-xl items-center justify-center text-center h-10 text-sm bg-primary text-white w-full cursor-pointer',
        rest.disabled && 'cursor-not-allowed opacity-60',
        className
    );

    return (
        <button {...rest} className={buttonClass} >
            {isLoading ? (
                <div className='flex gap-2 items-center'>
                    {percentage && percentage > 0 ? <span>{percentage}%</span> : <MoonLoader size={20} color='#fff' />}
                </div>
            ) : (
                label ?? children
            )}
        </button>
    )
})

Button.displayName = 'Button'

export default Button;