import React, {ReactNode, useEffect, useState} from 'react';
import {ViewStyle, View} from 'react-native';
import {CardSkeletonList} from './index';
import {onReady} from './_util';

type PagerProp = {
    style?: ViewStyle | ViewStyle[];
    children?: JSX.Element | JSX.Element[] | ReactNode[];
    init?: boolean;
};
const Pager: React.FC<PagerProp> = ({init, style, children}) => {
    const [isInit, setInit] = useState(init || false);
    useEffect(() => {
        onReady(() => {
            if (init === undefined) {
                setInit(true);
            }
        });
    }, []);
    useEffect(() => {
        if (init) {
            setInit(true);
        }
    }, [init]);
    return isInit ? children ? <View style={style}>{children}</View> : null : <CardSkeletonList num={8} />;
};
export default Pager;