import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, CardActions } from '@mui/material';
import Skeleton from '@mui/material/Skeleton';
import { styled } from '@mui/material/styles';
import Widget from '../Widget';
import { PREFIX } from './constants';
import { SCEventTemplateType } from '../../types/event';
import { EventSkeleton } from '../Event';
const classes = {
    root: `${PREFIX}-skeleton-root`,
    calendar: `${PREFIX}-calendar`,
    content: `${PREFIX}-content`,
    firstDivider: `${PREFIX}-first-divider`,
    secondDivider: `${PREFIX}-second-divider`,
    actions: `${PREFIX}-actions`
};
const Root = styled(Widget, {
    name: PREFIX,
    slot: 'SkeletonRoot',
    overridesResolver: (_props, styles) => styles.skeletonRoot
})(() => ({}));
export default function MyEventsWidgetSkeleton() {
    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(Box, Object.assign({ padding: "12px 16px" }, { children: _jsx(Skeleton, { animation: "wave", width: "141px", height: "33px" }) })), _jsx(EventSkeleton, { template: SCEventTemplateType.DETAIL, elevation: 0, square: true, actions: _jsx(_Fragment, {}) }), _jsxs(CardActions, Object.assign({ className: classes.actions }, { children: [_jsx(Skeleton, { animation: "wave", variant: "rounded", width: "14px", height: "14px" }), _jsx(Skeleton, { animation: "wave", width: "52px", height: "20px" }), _jsx(Skeleton, { animation: "wave", variant: "rounded", width: "14px", height: "14px" })] }))] })));
}
