import { Checkbox } from "@/components/ui/checkbox";
import { Skeleton } from "@/components/ui/skeleton";

type TTableLoadingProps = {
	tableHeader: string[];
};

const TableLoading = ({ tableHeader }: TTableLoadingProps) => {
	return (
		<div className='border rounded-md overflow-hidden'>
			<div
				className='grid bg-muted p-4 font-semibold text-sm'
				style={{ gridTemplateColumns: `40px repeat(${tableHeader.length}, 1fr)` }}>
				<Checkbox aria-label='Select row' variant='dashboard' />
				{tableHeader?.map(th => (
					<div key={th}>{th}</div>
				))}
			</div>
			{Array.from({ length: 5 }).map((_, i) => (
				<div
					key={i}
					className='grid items-center p-4 border-t'
					style={{ gridTemplateColumns: `40px repeat(${tableHeader.length}, 1fr)` }}>
						<Skeleton className='h-4 w-4' />
					{tableHeader.map((_, j) => (
						<Skeleton
							key={j}
							className={`h-4 ${j === 0 ? "w-32" : "w-32"}`}
						/>
					))}
				</div>
			))}
		</div>
	);
};

export default TableLoading;