import { Skeleton } from "@/components/ui/skeleton";
import {
	Table,
	TableBody,
	TableCaption,
	TableCell,
	TableFooter,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";

export default function DevicesTableSkeleton() {
	return (
		<>
			<div className="hidden sm:block">
				<Table className="overflow-scroll">
					<TableCaption>Table of all devices.</TableCaption>
					<TableHeader>
						<TableRow>
							<TableHead>Device Name</TableHead>
							<TableHead>MAC Address</TableHead>
							<TableHead>#</TableHead>
						</TableRow>
					</TableHeader>
					<TableBody className="overflow-scroll">
						{Array.from({ length: 10 }).map((_, i) => (
							<TableRow key={`${i + 1}`}>
								<TableCell>
									<Skeleton className="w-full h-10 rounded" />
								</TableCell>
								<TableCell>
									<Skeleton className="w-full h-10 rounded" />
								</TableCell>
								<TableCell>
									<Skeleton className="w-full h-10 rounded" />
								</TableCell>
							</TableRow>
						))}
					</TableBody>
					<TableFooter>
						<TableRow>
							<TableCell colSpan={2}>
								<Skeleton className="w-full  h-4 rounded" />
							</TableCell>
							<TableCell className="text-muted-foreground">
								<Skeleton className="w-20 h-4 rounded" />
							</TableCell>
						</TableRow>
					</TableFooter>
				</Table>
			</div>
			<div className="sm:hidden my-4">
				{Array.from({ length: 10 }).map((_, i) => (
					<DeviceCardSkeleton key={`${i + 1}`} />
				))}
			</div>
		</>
	);
}

function DeviceCardSkeleton() {
	return (
		<div
			className={cn(
				"flex text-sm justify-between items-center my-2 p-4 border rounded-md bg-gray-100",
			)}
		>
			<div className="font-semibold flex w-full flex-col items-start gap-2 mb-2 relative">
				<Skeleton className="w-32 h-6" />
				<Skeleton className="w-36 h-6" />
				<Skeleton className="w-32 h-4" />
				<Skeleton className="w-40 h-8" />
			</div>
		</div>
	);
}