import React, { ReactElement } from 'react';
import clsx from 'clsx';

export type SpinnerProps = {
  size?: 'sm' | 'md';
  className?: string;
  label?: string;
};

export const Spinner = ({ size = 'sm', className, label = 'Loading' }: SpinnerProps): ReactElement => {
  return (
    <div className="squiz-gb-scope spinner__wrapper text-gray-600" aria-label={label}>
      <div className={clsx('spinner', size && `spinner--${size}`, className)} role="status" />
    </div>
  );
};