import React from 'react';
import './spinner.css';

type Porps = {
  size? : 'default' | 'small' | 'medium' | 'large',
  variant?: 'default' |'primary' | 'secondary',
  buttonShow?: boolean,
  buttonLabel?: string
}

const Spinner = (props:Porps) => {
  const {buttonShow, buttonLabel="button", size, variant} = props;
  const showButton = buttonShow ? 'show-button': ''
  const spinnerSize = size ? `spinner-size-${size}` : ''
  const spinnerVarient = variant ? `spinner-bg-${variant}` : ''


  return (
    <div className={`spinner ${showButton} ${spinnerSize} ${spinnerVarient}`}>
      {buttonShow && <button className="spinner-button"><div className="sbl-circ"></div> {buttonLabel && buttonLabel}</button>}
      {!buttonShow && <div className='spinner-view'><div className="sbl-circ"></div></div> }
    </div>
  )
}

export default Spinner