import React from 'react';
import { FiltersMap } from '@wix/bex-core';
import { observer } from 'mobx-react-lite';
import { InitialSkeletonLoader } from '../InitialLoader/InitialSkeletonLoader';
import { GridFoldersState } from '../../state';
import { GridFoldersSection } from './GridFoldersSection';

export interface GridFoldersLoadingSectionProps<
  T1,
  F1 extends FiltersMap,
  T2,
  F2 extends FiltersMap,
> {
  state: GridFoldersState<T1, F1, T2, F2>;
}

function _GridFoldersLoadingSection<
  T1,
  F1 extends FiltersMap,
  T2,
  F2 extends FiltersMap,
>(props: GridFoldersLoadingSectionProps<T1, F1, T2, F2>) {
  const { state } = props;

  return (
    <GridFoldersSection state={state.items}>
      <InitialSkeletonLoader dataHook="initial-loader" state={state.items} />
    </GridFoldersSection>
  );
}

export const GridFoldersLoadingSection = observer(_GridFoldersLoadingSection);