export default function Loading() {
    return (
        <div className="mt-24 max-w-maxWidth mx-auto px-4 sm:px-0">
            {/* Blog Title Skeleton */}
            <div className="h-8 w-3/4 bg-gray-200 rounded-md animate-pulse"></div>

            <div className="mt-10 flex flex-col xl:flex-row gap-8">
                {/* Main Content Column */}
                <div className="flex-1 bg-white rounded-4xl p-5 sm:p-10">
                    {/* Meta Info Row */}
                    <div className="flex flex-wrap gap-2 sm:gap-4">
                        {/* Category */}
                        <div className="flex gap-1 items-center">
                            <div className="size-5 bg-gray-200 rounded-full animate-pulse"></div>
                            <div className="h-5 w-20 bg-gray-200 rounded-md animate-pulse"></div>
                        </div>

                        {/* Author */}
                        <div className="flex gap-1 items-center">
                            <div className="size-5 bg-gray-200 rounded-full animate-pulse"></div>
                            <div className="h-5 w-32 bg-gray-200 rounded-md animate-pulse"></div>
                        </div>

                        {/* Date */}
                        <div className="flex gap-1 items-center">
                            <div className="size-5 bg-gray-200 rounded-full animate-pulse"></div>
                            <div className="h-5 w-24 bg-gray-200 rounded-md animate-pulse"></div>
                        </div>
                    </div>

                    {/* Featured Image */}
                    <div className="mt-6">
                        <div className="w-full h-[200px] sm:h-[250px] md:h-[300px] lg:h-[400px] bg-gray-200 rounded-4xl animate-pulse"></div>
                    </div>

                    {/* Content Paragraphs */}
                    <div className="mt-8 space-y-4">
                        <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="h-4 w-5/6 bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="h-4 w-4/5 bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="h-4 w-full bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="h-4 w-3/4 bg-gray-200 rounded-md animate-pulse"></div>
                    </div>

                    {/* Share Section */}
                    <div className="mt-6 flex items-center gap-4 border-y border-gray-200 py-4">
                        <div className="h-5 w-24 bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="size-5 bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="size-5 bg-gray-200 rounded-md animate-pulse"></div>
                        <div className="size-5 bg-gray-200 rounded-md animate-pulse"></div>
                    </div>
                </div>

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

                        <div className="flex flex-col gap-6 mt-7">
                            {[1, 2, 3, 4].map((i) => (
                                <div key={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 */}
                    <div className="w-full rounded-4xl bg-white p-4 mt-6 animate-pulse">
                        <div className="h-6 w-24 bg-gray-200 rounded-md"></div>

                        <div className="flex flex-wrap sm:flex-nowrap gap-4 mt-6">
                            <div className="flex-1 min-w-[45%] 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 min-w-[45%] 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>
                </div>
            </div>
        </div>
    )
}