import { TargetedEvent, CSSProperties } from "preact/compat";
import './style.css';
import { SpinnerLoading } from "../..";

interface DefaultButtonProps {
  label: string
  containerClassName?: string,
  containerStyle?: CSSProperties,
  className?: string,
  style?: CSSProperties
  onClick?: (event: TargetedEvent) => any,
  href?: string,
  isLoading?: boolean
}

const DefaultButton = (props: DefaultButtonProps) => (
  <div
    className={props.containerClassName}
    style={props.containerStyle}
  >
    <a 
      href={props.href}
      onClick={props.onClick}
      className={`bg-gray default-button ${props.className ? props.className : ''}`} 
      style={{ paddingTop: 6, paddingBottom: 6, letterSpacing: .9, borderRadius: 7, ...props.style }}
    >
      { props.isLoading ?
        <SpinnerLoading style={{ verticalAlign: 'middle'}}/>
      :
        props.label 
      }

    </a>
  </div>
)

export default DefaultButton;