import React from 'react'
import classNames from 'classnames'
import { string, object, array, oneOf, oneOfType } from 'prop-types'

/**
 * Basic UI Spinner component to indicate loading states
 * @param {object} props
 */

const Loader = ({ size, use, className, ...props }) => {
  const classes = classNames('sw-loader', 'w-60', className, use, `w-${size}`, `h-${size}`)
  return <div className={classes} {...props} />
}

Loader.displayName = 'Loader'

Loader.propTypes = {
  /**
   * Allow user to pass in additional css classes
   */
  className: oneOfType([string, object, array]),
  /**
   * Set the height / width of the spinner
   */
  size: oneOf(['4', '6', '12', '16', '24']),
  /**
   * Set the theme of the spinner
   */
  use: oneOf(['primary', 'secondary', 'error', 'warning'])
}

Loader.defaultProps = {
  size: '16',
  use: 'primary'
}

export default Loader