import { Widget } from 'widgets/Widget';
import { useFileBrowserWidget } from './useFileBrowserWidget';
import { Header } from './components/Header';
import { SearchResults } from './components/SearchResults';
import { BrowseTab } from './components/BrowseTab';
import { RecentTab } from './components/RecentTab';
import { PinnedTab } from './components/PinnedTab';

export const FileBrowserWidget = () => {
  const fileBrowserManager = useFileBrowserWidget();
  const { tab, isSearching } = fileBrowserManager;

  return (
    <Widget title="File Browser">
      <Header fileBrowserManager={fileBrowserManager} />
      <div className="px-4 pb-3 max-h-72 overflow-y-auto">
        {isSearching ? (
          <SearchResults fileBrowserManager={fileBrowserManager} />
        ) : (
          <>
            {tab === 'browse' && <BrowseTab fileBrowserManager={fileBrowserManager} />}
            {tab === 'recent' && <RecentTab fileBrowserManager={fileBrowserManager} />}
            {tab === 'pinned' && <PinnedTab fileBrowserManager={fileBrowserManager} />}
          </>
        )}
      </div>
    </Widget>
  );
};
