import React, { FC } from 'react';
import { observer } from 'mobx-react-lite';
import { ExtensionsState } from '../../state/ExtensionsState';
import { Box } from '@wix/design-system';

export interface ExtensionsProps {
  state: ExtensionsState;
  dataHook?: string;
  [x: string]: any;
}

function _Extensions(params: ExtensionsProps) {
  const { state, dataHook, ...rest } = params;

  const { items } = state;

  return (
    <Box direction="vertical" gap="SP4" dataHook={dataHook}>
      {items.map(({ Extension: _Extension, componentId }) => {
        const Extension = _Extension as unknown as FC;
        return <Extension {...rest} key={componentId} />;
      })}
    </Box>
  );
}

export const Extensions = observer(_Extensions);