import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from 'react';
import { FilePen } from 'lucide-react';
import { useSessionFilesStore } from '../../stores/sessionFilesStore';
import { useSessionFiles } from '../../hooks/useSessionFiles';
export const SessionFilesSidebarToggle = memo(function SessionFilesSidebarToggle({ sessionId, }) {
    const isExpanded = useSessionFilesStore((state) => state.isExpanded);
    const toggleSidebar = useSessionFilesStore((state) => state.toggleSidebar);
    const { data } = useSessionFiles(sessionId);
    const fileCount = data?.totalFiles ?? 0;
    return (_jsxs("button", { type: "button", onClick: toggleSidebar, className: `relative p-3 w-full transition-colors touch-manipulation ${isExpanded
            ? 'bg-muted border-r-2 border-primary'
            : 'hover:bg-muted/50'}`, title: "Session Files", children: [_jsx(FilePen, { className: "w-5 h-5 text-muted-foreground mx-auto" }), fileCount > 0 && (_jsx("span", { className: "absolute top-1 right-1 w-5 h-5 bg-primary text-primary-foreground text-xs rounded-full flex items-center justify-center font-semibold", children: fileCount > 9 ? '9+' : fileCount }))] }));
});
//# sourceMappingURL=SessionFilesSidebarToggle.js.map