import { Spinner } from '@shopify/polaris';

interface SpinnerOverlayProps {
  size?: 'small' | 'large';
  text?: string;
}

export function SpinnerOverlay({ size = 'large', text }: SpinnerOverlayProps) {
  return (
    <div
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100vw',
        height: '100vh',
        backgroundColor: 'rgba(255, 255, 255, 0.7)',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 9999,
      }}
    >
      <Spinner accessibilityLabel="Loading" size={size} />
      {text && (
        <p
          style={{
            marginTop: '1rem',
            fontSize: '1rem',
            color: '#202223',
            fontWeight: 500,
          }}
        >
          {text}
        </p>
      )}
    </div>
  );
}