import React from 'react';
import { Skeleton as AntSkeleton } from 'antd';

interface SkeletonProps {
    rows?: number;
    avatar?: boolean;
    title?: boolean;
    active?: boolean;
    loading?: boolean;
    children?: React.ReactNode;
}

export default function Skeleton({
    rows = 3,
    avatar = false,
    title = true,
    active = true,
    loading = true,
    children,
}: SkeletonProps) {
    if (!loading) {
        return <>{children}</>;
    }

    return <AntSkeleton avatar={avatar} title={title} active={active} paragraph={{ rows }} />;
}

export function TableSkeleton({ rows = 5 }: { rows?: number }) {
    return (
        <div style={{ padding: '20px' }}>
            {Array.from({ length: rows }).map((_, index) => (
                <AntSkeleton
                    key={index}
                    active
                    paragraph={{ rows: 0 }}
                    title={{ width: '100%' }}
                    style={{ marginBottom: 16 }}
                />
            ))}
        </div>
    );
}

export function CardSkeleton() {
    return <AntSkeleton active avatar paragraph={{ rows: 4 }} />;
}