import { type FC, Fragment } from 'react'
import Skeleton from 'react-loading-skeleton'

type Props = {
    tdCount: number,
    trCount?: number,
}

const DefaultTableSkeleton: FC<Props> = ({ tdCount, trCount = 5 }) => {
    return (
        <Fragment>
            {
                Array.from({ length: trCount }).map((_, rowIndex) => (
                    <tr className="w-full h-[64px] md:h-[74px] bg-white border-t border-[#EAEDF5]" key={rowIndex}>
                        {
                            Array.from({ length: tdCount }).map((_, colIndex) => (
                                <td key={colIndex} className="px-3 md:px-6 py-3 md:py-4 whitespace-nowrap text-xs">
                                    <Skeleton height={20} width="100%" />
                                </td>
                            ))
                        }
                    </tr>
                ))
            }
        </Fragment>
    )
}

export default DefaultTableSkeleton