import { Card } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

// loading component, this renders when loading in /games happens
export default function Loading() {
    return (
        <div className="main-content h-full">
            <Card className="w-full h-full overflow-hidden">
                <div className="h-64 overflow-hidden">
                    <Skeleton className="bg-slate-600  dark:bg-slate-400" />
                </div>
                <div className="p-6 md:p-12 ss:flex">
                    <Skeleton className="h-52 w-52 -mt-36 rounded-full" />
                    <div className="ml-6 md:ml-12 space-y-3">
                        <Skeleton className="h-6 w-1/4 bg-gray-400 dark:bg-gray-200" />
                        <Skeleton className="h-6 w-1/4 bg-sky-500" />
                    </div>
                </div>
                <div className="px-6 md:px-12">
                    {/* <div className="border-b border-gray-400 dark:border-gray-200" /> */}
                    {/* tweets */}
                </div>
            </Card >
            <div className="side-content">
                <Card className="p-6 grid items-start gap-2 bg-secondary">
                    <Skeleton className="h-6 w-1/4 bg-gray-400 dark:bg-gray-200" />
                    <div className="grid grid-cols-1 gap-4">
                        {Array.from({ length: 2 }, (_, i) => i + 1).map((i) => {
                            return (
                                <Skeleton key={i} className="aspect-[264/374] bg-gray-300" />
                            )
                        })}
                    </div>
                </Card>
            </div>
        </div >
    )
}