import React from 'react';

import { ErrorBoundary } from 'react-error-boundary';
import ErrorFallback from '../common/ErrorFallback';
import Loading from '../common/Loading';
import MenuPanel from './MenuPanel';

interface DesktopAppProps {
  pluginId: string;
  event: kintone.events.AppRecordDetailShowEvent | kintone.events.MobileAppRecordDetailShowEvent;
}

const DesktopApp: React.FC<DesktopAppProps> = (props) => {
  const { pluginId, event } = props;
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <React.Suspense fallback={<Loading />}>
        <MenuPanel pluginId={pluginId} event={event} />
      </React.Suspense>
    </ErrorBoundary>
  );
};
export default DesktopApp;