import React from 'react';
import { GridBaseState } from '../../state';
import { FiltersMap } from '@wix/bex-core';
import { SkeletonGrid } from '../SkeletonGrid';
import { Box } from '@wix/design-system';
import { observer } from 'mobx-react-lite';

export interface InitialSkeletonLoaderProps<T, F extends FiltersMap> {
  dataHook?: string;
  state: GridBaseState<T, F>;
}

function _InitialSkeletonLoader<T, F extends FiltersMap>({
  state,
  dataHook,
}: InitialSkeletonLoaderProps<T, F>) {
  const {
    toolbar: { contentPaddingPx },
  } = state;

  return (
    <Box
      dataHook={dataHook}
      direction="vertical"
      paddingBottom={contentPaddingPx}
    >
      <SkeletonGrid state={state} />
    </Box>
  );
}

export const InitialSkeletonLoader = observer(_InitialSkeletonLoader);