import { useParams } from 'react-router';
import Flow from './Flow';
import { usePanelStore } from '../store';
import { useShallow } from 'zustand/react/shallow';
import { useEffect, useRef } from 'react';
import { DialogModal } from '@kevisual/ui';
import '@kevisual/ui';
export const App = () => {
  const param = useParams();
  const id = param.id;
  const panel = usePanelStore(
    useShallow((state) => {
      return {
        getPanel: state.getPanel,
      };
    }),
  );
  useEffect(() => {
    id && panel.getPanel(id);
  }, []);
  if (!id) {
    return <>No ID</>;
  }
  return (
    <div className='w-full h-full p-4'>
      <div className='w-full h-full'>
        <Flow />
      </div>
    </div>
  );
};
