import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
import { cn } from '../../../helper/cn';

export const Button = ({
  isLoading,
  ...props
}: DetailedHTMLProps<
  ButtonHTMLAttributes<HTMLButtonElement>,
  HTMLButtonElement
> & {
  isLoading?: boolean;
}) => {
  return (
    <button
      {...(props as any)}
      className={cn('btn', props.className)}
      disabled={isLoading || props.disabled}
    >
      {isLoading && (
        <span className="loading loading-spinner loading-sm"></span>
      )}
      {props.children as any}
    </button>
  );
};