import React, { CSSProperties } from 'react';
import { Box, BoxProps, Loader, LoaderProps } from '@wix/design-system';

export interface InitialLoaderProps
  extends Partial<LoaderProps>,
    Partial<Omit<BoxProps & CSSProperties, keyof LoaderProps>> {
  state: {
    internalScroll?: boolean;
  };
}

export function InitialLoader(props: InitialLoaderProps) {
  const { dataHook, size, state, minHeight = '300px', ...rest } = props;

  return (
    <Box
      backgroundColor="D80"
      align="center"
      verticalAlign="middle"
      borderRadius="8px"
      minHeight={minHeight}
      height={state.internalScroll ? '100%' : undefined}
      {...rest}
    >
      <Loader dataHook={dataHook} size={size} />
    </Box>
  );
}