import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { dashboardSidebarClassnames } from '../DashboardSidebar/constants';
import { Skeleton } from '../Skeleton';
import { classNames } from '../utils/classNames';
import { ItemWrapper, ListWrapper, SkeletonDescription, Wrapper, } from './styles';
import { useLogic } from './useLogic';
export const DashboardSidebarSkeleton = () => {
    const { isPinned } = useLogic();
    return (_jsxs(Wrapper, { "$isPinned": isPinned, className: classNames(dashboardSidebarClassnames.root), children: [_jsx(Skeleton, { shapeSize: isPinned ? 'medium' : 'small', height: 40, variant: "rounded" }), _jsxs(ListWrapper, { "$isPinned": isPinned, children: [_jsxs(ItemWrapper, { children: [_jsx(Skeleton, { height: 20, width: 20, variant: "rounded", shapeSize: "small" }), _jsx(SkeletonDescription, { height: 14, width: 174, variant: "rounded", "$isPinned": isPinned })] }), _jsxs(ItemWrapper, { children: [_jsx(Skeleton, { height: 20, width: 20, variant: "rounded", shapeSize: "small" }), _jsx(SkeletonDescription, { height: 14, width: 174, variant: "rounded", "$isPinned": isPinned })] }), _jsxs(ItemWrapper, { children: [_jsx(Skeleton, { height: 20, width: 20, variant: "rounded", shapeSize: "small" }), _jsx(SkeletonDescription, { height: 14, width: 174, variant: "rounded", "$isPinned": isPinned })] }), isPinned && (_jsxs(ItemWrapper, { children: [_jsx(Skeleton, { height: 20, width: 20, variant: "rounded", shapeSize: "small" }), _jsx(SkeletonDescription, { height: 14, width: 174, variant: "rounded", "$isPinned": isPinned })] }))] })] }));
};
