import { FolderOpen } from 'lucide-react'
import { TOOL } from '@/lib/editorMeta'
import { useUiStore } from '../store/uiStore'
import { Button } from '@/components/ui/button'

/** Header for an editor's tools sidebar: the current-tool indicator on the left,
 *  and a button that swaps the sidebar over to the document library. The mirror
 *  of the "Tools" button the library view shows. */
export default function ToolsHeader() {
  const editorKind = useUiStore((s) => s.editorKind)
  const setSidebarView = useUiStore((s) => s.setSidebarView)
  const { label, icon: Icon } = TOOL[editorKind]

  return (
    <div className="flex items-center justify-between gap-2">
      <div className="flex min-w-0 items-center gap-2">
        <Icon className="size-4 shrink-0 text-muted-foreground" />
        <h1 className="truncate text-base font-semibold tracking-tight">{label}</h1>
      </div>
      <Button
        type="button"
        variant="ghost"
        size="sm"
        className="shrink-0 text-muted-foreground"
        onClick={() => setSidebarView('library')}
      >
        <FolderOpen data-icon="inline-start" />
        Library
      </Button>
    </div>
  )
}