CarouselCard = props => {
    const {
        children,
        id,
        className,
        style,
        scrollDuration,
        disableAutoScroll,
        disableAutoRefresh,
    } = props;

    const containerRef = useRef();
    const listRef = useRef();
    const animationTimeoutRef = useRef();

    const [isAnimationPaused, setIsAnimationPaused] = useState(disableAutoScroll);
    const [activeItem, setActiveItem] = useState();
    const prevActiveItem = usePrevious(activeItem);

    const { childrenRegistered, register, unregister } = useChildrenRegister({
        containerRef: listRef,
        selector: SELECTOR,
    });

    useEffect(() => {
        if (childrenRegistered[0] && childrenRegistered[0].id !== activeItem) {
            setActiveItem(childrenRegistered[0].id);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [childrenRegistered]);

    useEffect(() => {
        if (!isAnimationPaused) {
            animationTimeoutRef.current = setTimeout(() => {
                const selectedItemIndex = getItemIndex(childrenRegistered, activeItem);
                const isLastItem = selectedItemIndex === childrenRegistered.length - 1;
                const nextItem = isLastItem ? 0 : selectedItemIndex + 1;
                if (isLastItem && disableAutoRefresh) {
                    setIsAnimationPaused(true);
                } else if (childrenRegistered[nextItem]) {
                    setActiveItem(childrenRegistered[nextItem].id);
                }
            }, scrollDuration * 1000);
        }
        return () => {
            if (animationTimeoutRef.current) {
                clearTimeout(animationTimeoutRef.current);
            }
        };
    }, [activeItem, childrenRegistered, disableAutoRefresh, isAnimationPaused, scrollDuration]);

    const handleSelect = childId => {
        setActiveItem(childId);
        setIsAnimationPaused(true);
    };

    const containerStyle = { height: getHeight(containerRef.current), ...style };
    const context = {
        childrenRegistered,
        activeItem,
        prevActiveItem,
        isAnimationPaused,
        register,
        unregister,
    };

    return (
        <StyledContainer className={className} style={containerStyle} id={id} ref={containerRef}>
            <StyledAutoplay>
                <AnimationButton
                    onClick={() => setIsAnimationPaused(!isAnimationPaused)}
                    isAnimationPaused={isAnimationPaused}
                />
            </StyledAutoplay>
            <StyledImagesUl ref={listRef}>
                <Provider value={context}>{children}</Provider>
            </StyledImagesUl>
            <Indicators
                carouselChildren={childrenRegistered}
                onSelect={handleSelect}
                selectedItem={activeItem}
            />
        </StyledContainer>
    );
}
A carouselCard allows multiple pieces of featured content to occupy an allocated amount of space.