import { Loader2 } from 'lucide-react';
import { Breadcrumb } from '../../FileBrowserApp/components/Breadcrumb';
import type { UseFileBrowserWidgetType } from '../useFileBrowserWidget';
import { EntryRow } from './EntryRow';

type BrowseTabProps = {
  fileBrowserManager: UseFileBrowserWidgetType;
};

export const BrowseTab = ({ fileBrowserManager }: BrowseTabProps) => {
  const { browsePath, setBrowsePath, entries, loading, openFile, isPinned, togglePin } = fileBrowserManager;

  return (
    <div>
      <div className="py-2">
        <Breadcrumb path={browsePath} onNavigate={setBrowsePath} />
      </div>
      {loading ? (
        <div className="flex items-center justify-center py-6 text-duck-dark/40">
          <Loader2 className="h-4 w-4 animate-spin" />
        </div>
      ) : entries.length === 0 ? (
        <p className="text-xs text-duck-dark/40 py-4 text-center">Empty directory</p>
      ) : (
        <ul className="space-y-0.5">
          {entries.map((entry) => {
            const fullPath = browsePath === '/' ? `/${entry.name}` : `${browsePath}/${entry.name}`;
            return (
              <EntryRow
                key={entry.name}
                name={entry.name}
                type={entry.type}
                pinned={entry.type === 'file' && isPinned(fullPath)}
                onPin={entry.type === 'file' ? () => togglePin(fullPath, entry.name) : undefined}
                onClick={() => {
                  if (entry.type === 'directory') setBrowsePath(fullPath);
                  else openFile(fullPath, entry.name);
                }}
              />
            );
          })}
        </ul>
      )}
    </div>
  );
};
