import clsx from 'clsx'
import type { ComponentProps } from 'react'
import { CgSpinnerAlt } from 'react-icons/cg'

export type ButtonVariant = 'solid' | 'outline'

export interface ButtonProps extends ComponentProps<'button'> {
  isDisabled?: boolean
  isLoading?: boolean
  isWide?: boolean
  leftIcon?: JSX.Element
  rightIcon?: JSX.Element
  variant?: ButtonVariant
}

export const Button = (props: ButtonProps) => {
  const { isDisabled, isLoading, isWide, leftIcon, rightIcon, variant = 'solid', className, children, ...rest } = props

  return (
    <button
      className={clsx(
        'group flex items-center py-2 space-x-2 font-bold focus:ring',
        isWide ? 'px-8' : 'px-4',
        {
          'bg-plumbus hover:bg-plumbus-light rounded ': variant === 'solid',
          'bg-plumbus hover:bg-plumbus-light rounded border border-plumbus-dark': variant === 'outline',
          'opacity-50 cursor-not-allowed pointer-events-none': isDisabled,
          'pl-2 animate-pulse cursor-wait pointer-events-none': isLoading,
        },
        className,
      )}
      disabled={isDisabled}
      type="button"
      {...rest}
    >
      {isLoading ? <CgSpinnerAlt className="animate-spin" /> : leftIcon}
      <div>{children}</div>
      {!isLoading && rightIcon}
    </button>
  )
}