import { useEditor } from '@craftjs/core';
import React from 'react';

export const SettingPanel: React.FC = () => {
  const { settings } = useEditor((state) => {
    const [selectedId] = state.events.selected;
    const node = state.nodes[selectedId];

    return {
      settings: node ? node.related?.settings : null,
    };
  });

  return (
    <div
      style={{
        height: '100%',
        borderLeft: '1px solid #9d9d9d',
        boxSizing: 'border-box',
        padding: 20,
        overflow: 'auto',
      }}
    >
      {settings ? React.createElement(settings) : null}
    </div>
  );
};