import { FC, Fragment } from 'react'
import Td from '@/components/Td'
import Skeleton from 'react-loading-skeleton'

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

const DefaultTableSkeleton: FC<Props> = ({ tdCount, trCount = 5 }) => {
    const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
    const baseColor = isDark ? '#2d2d30' : '#e5e7eb'
    const highlightColor = isDark ? '#3c3c3c' : '#f3f4f6'
    return (
        <Fragment>
            {
                Array.from({ length: trCount }).map((_, rowIndex) => (
                    <tr className="w-full h-[64px] md:h-[74px] bg-surface border-t border-surface" key={rowIndex}>
                        {
                            Array.from({ length: tdCount }).map((_, colIndex) => (
                                <Td text={''} key={colIndex}>
                                    <Skeleton baseColor={baseColor} highlightColor={highlightColor} />
                                </Td>
                            ))
                        }
                    </tr>
                ))
            }
        </Fragment>
    )
}

export default DefaultTableSkeleton
