import { jsx as _jsx } from "react/jsx-runtime";
import StateCard from '../../../../../design-system/StateCard';
import { List } from '@mui/material';
import { ParticipationItemSkeleton } from '../../../Participation';
import ParticipationListItem from '../ParticipationListItem';
const SKELETON_COUNT = 5;
const ParticipationList = ({ items, isLoading = false, isPreviousData = false, noDataMessage, emptyState, formatRatioLabel, renderChildren, depth = 0, }) => {
    if (isLoading && !isPreviousData) {
        return (_jsx(List, { disablePadding: true, children: Array.from({ length: SKELETON_COUNT }).map((_, i) => (_jsx(ParticipationItemSkeleton, {}, i))) }));
    }
    if (!items || items.length === 0) {
        return (_jsx(StateCard, { title: emptyState.title, description: emptyState.description }));
    }
    return (_jsx(List, { disablePadding: true, sx: { opacity: isPreviousData ? 0.5 : 1, transition: 'opacity 0.2s' }, children: items.map((item, index) => (_jsx(ParticipationListItem, { primary: item.title, secondary: item.subtitle, value: item.participationPercentage, ratioLabel: formatRatioLabel(item.completedReviews, item.totalReviews), noDataMessage: noDataMessage, isEmpty: item.totalReviews === 0, expandable: item.hasChildren && !!renderChildren, depth: depth, isLastItem: index === items.length - 1, avatarSrc: item.avatarSrc, avatarAlt: item.avatarAlt, children: item.hasChildren && renderChildren
                ? (isExpanded) => renderChildren(item, isExpanded)
                : undefined }, item.id))) }));
};
export default ParticipationList;
