import type { PanelSide } from '../plugin/workspace'
import { FILE_TREE_BASE_PAD_PX, getFileIcon } from './file-tree/file-tree-utils'
import './file-tree/FileTreeItem.css'

const FileIcon = getFileIcon('md')

/** Uses the panel's real chrome, tab slots and file-row geometry. */
export function SidebarLoading({ side, tabCount }: { side: PanelSide; tabCount: number }) {
  return (
    <div className="sidebar-view-container sidebar-loading" data-side={side} role="status" aria-label="Loading sidebar views" aria-busy="true">
      <div className="sidebar-view-tabs" aria-hidden="true">
        {Array.from({ length: tabCount }, (_, slot) => <div className="sidebar-view-tab sidebar-loading__tab" key={slot} />)}
      </div>
      <div className="sidebar-view-panel" aria-hidden="true">
        <div className="sidebar-view-header">
          <span className="sidebar-loading__title" />
          <div className="sidebar-view-header__actions"><span className="sidebar-loading__action" /></div>
        </div>
        <div className="sidebar-view-body">
          {[70, 54, 64, 48, 74, 58, 66, 50].map((width, row) => (
            <div className="file-tree-item sidebar-loading__row" key={row} style={{ paddingLeft: FILE_TREE_BASE_PAD_PX }}>
              <FileIcon size={16} className="file-tree-item__icon" />
              <span className="sidebar-loading__label" style={{ width: `${width}%` }}>&nbsp;</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}