import {
  DockviewReact,
  DockviewReadyEvent,
  IDockviewPanelProps,
} from 'dockview';
import React from 'react';

const Default = (props: IDockviewPanelProps) => {
  return <div>{props.api.title}</div>;
};

const components = {
  default: Default,
};

export default () => {
  const onReady = (event: DockviewReadyEvent) => {
    event.api.addGroup({
      id: 'group_1',
      direction: 'within',
    });

    event.api.addPanel({
      id: 'panel_1',
      component: 'default',
      position: {
        direction: 'within',
        referenceGroup: 'group_1',
      },
    });
    event.api.addGroup({
      id: "group_2",
      direction: 'within',
    })
    event.api.addPanel({
      id: 'panel_2',
      component: 'default',
      position: {
        direction: 'within',
        referenceGroup: 'group_2',
      },
    });
    event.api.getGroup("group_2").setVisible(false)
  };

  return (
    <DockviewReact
      className={'dockview-theme-abyss'}
      onReady={onReady}
      components={components}
    />
  );
};

 "dependencies": {
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.3.0",
    "@testing-library/user-event": "^13.5.0",
    "dockview-react": "^4.2.5",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },