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

type SearchResultsProps = {
  fileBrowserManager: UseFileBrowserWidgetType;
};

export const SearchResults = ({ fileBrowserManager }: SearchResultsProps) => {
  const { searching, searchResults, openFile, isPinned, togglePin } = fileBrowserManager;

  if (searching) {
    return (
      <div className="flex items-center justify-center py-6 text-duck-dark/40">
        <Loader2 className="h-4 w-4 animate-spin" />
      </div>
    );
  }

  if (searchResults.length === 0) {
    return <p className="text-xs text-duck-dark/40 py-4 text-center">No results</p>;
  }

  return (
    <ul className="space-y-0.5">
      {searchResults.map((entry) => (
        <EntryRow
          key={entry.path}
          name={entry.name}
          subtitle={entry.path}
          type={entry.type}
          pinned={entry.type === 'file' && isPinned(entry.path!)}
          onPin={entry.type === 'file' ? () => togglePin(entry.path!, entry.name) : undefined}
          onClick={() => {
            if (entry.type === 'file') openFile(entry.path!, entry.name);
          }}
        />
      ))}
    </ul>
  );
};
