export default function Loading() {
    return (
        <div>
            {/* Hero Section Skeleton */}
            <div className="relative rounded-4xl overflow-hidden">
                <div className="w-full rounded-4xl object-cover xl:mt-14 mt-8 xl:min-h-[340px] min-h-[200px] bg-gray-200 animate-pulse"></div>
                <div className="absolute bottom-0 h-[140px] w-full p-6">
                    <div className="h-6 w-3/4 bg-gray-300 rounded-md animate-pulse"></div>
                    <div className="h-4 w-5/6 bg-gray-300 rounded-md animate-pulse mt-4"></div>
                </div>
            </div>

            {/* Secondary Hero Items */}
            <div className="flex xl:flex-row flex-col gap-8 mt-10">
                {[1, 2, 3].map((i) => (
                    <div key={`hero-item-${i}`} className="flex-1 bg-white rounded-4xl p-4 overflow-hidden animate-pulse">
                        <div className="h-40 w-full bg-gray-200 rounded-4xl"></div>
                        <div className="p-4">
                            <div className="h-5 w-4/5 bg-gray-200 rounded-md"></div>
                            <div className="mt-3 flex gap-2">
                                <div className="h-4 w-24 bg-gray-200 rounded-md"></div>
                                <div className="h-4 w-16 bg-gray-200 rounded-md"></div>
                            </div>
                            <div className="mt-3 flex justify-between items-center">
                                <div className="h-4 w-32 bg-gray-200 rounded-md"></div>
                                <div className="h-6 w-6 bg-gray-200 rounded-md"></div>
                            </div>
                        </div>
                    </div>
                ))}
            </div>

            {/* Blog Title */}
            <h1 className="text-2xl font-bold mt-10">
                <div className="h-8 w-48 bg-gray-200 rounded-md animate-pulse"></div>
            </h1>

            {/* Main Content Area */}
            <div className="mt-10 flex xl:flex-row flex-col gap-8">
                {/* Left Sidebar - Categories */}
                <div className="xl:w-[261px] w-full">
                    <div className="w-full rounded-4xl bg-white p-4 animate-pulse">
                        <div className="h-6 w-36 bg-gray-200 rounded-md"></div>

                        <div className="flex flex-col gap-4 mt-7">
                            {[1, 2, 3, 4, 5, 6].map((i) => (
                                <div key={`cat-${i}`} className="h-10 bg-gray-200 rounded-xl p-2.5 flex items-center gap-2">
                                    <div className="size-5 bg-gray-300 rounded-full"></div>
                                    <div className="h-4 w-24 bg-gray-300 rounded-md"></div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>

                {/* Center Content - Blog List */}
                <div className="flex-1 flex flex-col gap-8">
                    {[1, 2, 3, 4].map((i) => (
                        <div key={`blog-${i}`} className="w-full rounded-4xl bg-white p-7 flex xl:flex-row flex-col gap-6 animate-pulse">
                            <div className="size-[150px] bg-gray-200 rounded-4xl mx-auto xl:mx-0"></div>
                            <div className="flex-1">
                                <div className="h-5 w-3/4 bg-gray-200 rounded-md"></div>

                                <div className="mt-3 flex gap-3">
                                    <div className="flex items-center gap-1">
                                        <div className="size-[18px] bg-gray-200 rounded-full"></div>
                                        <div className="h-4 w-20 bg-gray-200 rounded-md"></div>
                                    </div>
                                    <div className="flex items-center gap-1">
                                        <div className="size-[18px] bg-gray-200 rounded-full"></div>
                                        <div className="h-4 w-24 bg-gray-200 rounded-md"></div>
                                    </div>
                                </div>

                                <div className="mt-3 space-y-2">
                                    <div className="h-4 w-full bg-gray-200 rounded-md"></div>
                                    <div className="h-4 w-full bg-gray-200 rounded-md"></div>
                                    <div className="h-4 w-3/4 bg-gray-200 rounded-md"></div>
                                </div>

                                <div className="mt-3 flex gap-1 items-center">
                                    <div className="h-4 w-24 bg-gray-200 rounded-md"></div>
                                    <div className="size-[18px] bg-gray-200 rounded-md"></div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>

                {/* Right Sidebar */}
                <div className="xl:w-[261px] w-full">
                    {/* Most Visited Widget */}
                    <div className="w-full rounded-4xl bg-white p-4 animate-pulse">
                        <div className="h-6 w-36 bg-gray-200 rounded-md"></div>

                        <div className="flex flex-col gap-6 mt-7">
                            {[1, 2, 3, 4].map((i) => (
                                <div key={`most-visited-${i}`} className="flex gap-3">
                                    <div className="size-16 bg-gray-200 rounded-lg"></div>
                                    <div className="flex-1">
                                        <div className="h-4 w-full bg-gray-200 rounded-md"></div>
                                        <div className="h-3 w-16 bg-gray-200 rounded-md mt-2"></div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* Contact Us Widget */}
                    <div className="w-full rounded-4xl bg-white p-4 mt-6 animate-pulse">
                        <div className="h-6 w-28 bg-gray-200 rounded-md"></div>

                        <div className="flex gap-4 mt-6">
                            <div className="flex-1 bg-gray-200 rounded-xl p-4">
                                <div className="size-6 bg-gray-300 rounded-md"></div>
                                <div className="mt-1.5">
                                    <div className="h-4 w-20 bg-gray-300 rounded-md"></div>
                                    <div className="h-3 w-16 bg-gray-300 rounded-md mt-1"></div>
                                </div>
                            </div>

                            <div className="flex-1 bg-gray-200 rounded-xl p-4">
                                <div className="size-6 bg-gray-300 rounded-md"></div>
                                <div className="mt-1.5">
                                    <div className="h-4 w-20 bg-gray-300 rounded-md"></div>
                                    <div className="h-3 w-16 bg-gray-300 rounded-md mt-1"></div>
                                </div>
                            </div>
                        </div>

                        <div className="bg-gray-200 rounded-xl p-4 mt-4">
                            <div className="size-6 bg-gray-300 rounded-md"></div>
                            <div className="mt-1.5">
                                <div className="h-4 w-32 bg-gray-300 rounded-md"></div>
                                <div className="h-3 w-24 bg-gray-300 rounded-md mt-1"></div>
                            </div>
                        </div>
                    </div>

                    {/* Second Most Visited Widget */}
                    <div className="w-full rounded-4xl bg-white p-4 mt-6 animate-pulse">
                        <div className="h-6 w-36 bg-gray-200 rounded-md"></div>

                        <div className="flex flex-col gap-6 mt-7">
                            {[1, 2, 3, 4].map((i) => (
                                <div key={`most-visited-2-${i}`} className="flex gap-3">
                                    <div className="size-16 bg-gray-200 rounded-lg"></div>
                                    <div className="flex-1">
                                        <div className="h-4 w-full bg-gray-200 rounded-md"></div>
                                        <div className="h-3 w-16 bg-gray-200 rounded-md mt-2"></div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}