import { Empty, EmptyProps, Skeleton, SkeletonProps } from 'antd'
import { cloneElement, memo } from 'react'

export type SkeletonLoaderProps = SkeletonProps & {
    empty?: boolean
    loading?: boolean
    children: JSX.Element
    emptyNode?: JSX.Element
    emptyProps?: EmptyProps
}

export const SkeletonLoader = memo<SkeletonLoaderProps>(({ loading, empty, children, emptyNode = <Empty />, emptyProps, ...other }) => {
    if (loading)
        return <Skeleton active {...other} />

    if (empty)
        return cloneElement(emptyNode, emptyProps)
    
    return children
})

export default SkeletonLoader