import Sidebar from './sidebar';
import { Content } from './content';
import { Panel, Group, Separator } from 'react-resizable-panels';
import { Toolbar } from './modules/Nav';
import { Toaster } from 'sonner';
const Provider = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      {children}
      <Toaster position="bottom-right" richColors />
    </>
  );
};
export const App = () => {
  return (
    <Provider>
      <AIEditor />
    </Provider>
  );
};

export const SidebarApp = () => {
  return (
    <Provider>
      <Sidebar />
    </Provider>
  );
};

export const AIEditor = () => {
  return (
    <div className='h-screen w-full flex flex-col bg-white dark:bg-black text-gray-900 dark:text-gray-100'>
      <div className='h-16 shrink-0 text-xl font-bold border-b border-gray-200 dark:border-gray-800 p-3 flex gap-2 items-center bg-gray-50 dark:bg-gray-950'>
        <span className='font-mono text-sm tracking-tight'>Codepod</span>
        <Toolbar />
      </div>
      <div className='flex-1 min-h-0'>
        <Group orientation="horizontal">
          <Panel minSize={200} defaultSize={240} maxSize={400}>
            <Sidebar />
          </Panel>
          <Separator className='bg-gray-200 dark:bg-gray-800 w-px' />
          <Panel minSize={30}>
            <Content />
          </Panel>
        </Group>
      </div>
    </div>
  );
};