import type { UseFileBrowserWidgetType } from '../useFileBrowserWidget';
import { EntryRow } from './EntryRow';

type PinnedTabProps = {
  fileBrowserManager: UseFileBrowserWidgetType;
};

export const PinnedTab = ({ fileBrowserManager }: PinnedTabProps) => {
  const { pinned, openFile, togglePin } = fileBrowserManager;

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

  return (
    <ul className="space-y-0.5">
      {pinned.map((f) => (
        <EntryRow
          key={f.path}
          name={f.name}
          subtitle={f.path}
          type="file"
          pinned
          onPin={() => togglePin(f.path, f.name)}
          onClick={() => openFile(f.path, f.name)}
        />
      ))}
    </ul>
  );
};
