import React from 'react';
import { Skeleton } from '@/Components/ui/skeleton';

export default function FullArticleSkeleton() {
    return (
        <article className="mb-20 animate-in fade-in duration-700 bg-background">
            
            {/* Top Ad Placeholder */}
            <div className="mb-8 flex justify-center w-full">
                <Skeleton className="h-[90px] w-full max-w-[728px] rounded-md" />
            </div>

            {/* --- HEADER SECTION --- */}
            <header className="mb-8 mt-2">
                
                {/* Breadcrumb Skeleton */}
                <Skeleton className="h-5 w-64 mb-5 rounded-md" />

                {/* Title (H1 match) */}
                <Skeleton className="h-8 md:h-12 w-11/12 mb-3 rounded-md mt-4" />
                <Skeleton className="h-8 md:h-12 w-3/4 mb-6 rounded-md" />
                
                {/* Meta Description */}
                <Skeleton className="h-5 w-full mb-2" />
                <Skeleton className="h-5 w-5/6 mb-6" />

                {/* --- META ROW (Border Y match) --- */}
                <div className="flex flex-col sm:flex-row sm:items-center justify-between border-y border-border py-4 gap-4">
                    
                    {/* LEFT: Author Info */}
                    <div className="flex items-center gap-3">
                        <Skeleton className="h-10 w-10 rounded-full border border-border shrink-0" />
                        <div className="flex flex-col gap-1.5">
                            <Skeleton className="h-4 w-32 rounded-md" /> {/* Author Name */}
                            <div className="flex gap-2">
                                <Skeleton className="h-3 w-24 rounded-md" /> {/* Date */}
                                <Skeleton className="h-3 w-16 rounded-md" /> {/* Source Link */}
                            </div>
                        </div>
                    </div>

                    {/* RIGHT: Actions (Buttons) */}
                    <div className="flex items-center gap-2 sm:gap-3 w-full sm:w-auto mt-1 sm:mt-0">
                        <Skeleton className="h-9 flex-1 sm:w-24 rounded-md" /> {/* Comment Btn */}
                        <Skeleton className="h-9 flex-1 sm:w-24 rounded-md" /> {/* Share Btn */}
                    </div>
                </div>
            </header>

            {/* --- MAIN IMAGE / CAROUSEL --- */}
            <div className="mb-8">
                {/* Aspect Ratio 2:1 match */}
                <Skeleton className="w-full aspect-video md:aspect-[2/1] rounded-2xl shadow-sm" />
                
                {/* Caption match */}
                <div className="mt-2 flex justify-center">
                    <Skeleton className="h-3 w-1/3 rounded-full opacity-50" />
                </div>
            </div>

            {/* Middle Ad Placeholder */}
            <div className="mb-8 flex flex-col items-center my-8">
                <Skeleton className="h-3 w-20 mb-2 rounded-full" /> 
                <Skeleton className="h-[250px] w-[300px] rounded-md" />
            </div>

            {/* --- CONTENT BODY --- */}
            <div className="space-y-4 max-w-none mb-12">
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-11/12" />
                <Skeleton className="h-4 w-full" />
                <br />
                <Skeleton className="h-4 w-10/12" />
                <Skeleton className="h-4 w-full" />
                
                {/* --- INLINE RELATED WIDGET PLACEHOLDER --- */}
                <div className="my-10 border-y border-border py-8">
                    <div className="flex items-center gap-2 mb-6">
                        <Skeleton className="h-7 w-7 rounded-full" />
                        <Skeleton className="h-6 w-48 rounded-md" />
                    </div>
                    
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                        {/* Main Related Card */}
                        <div>
                            <Skeleton className="aspect-[16/10] w-full rounded-xl mb-3" />
                            <Skeleton className="h-6 w-11/12 rounded-md" />
                        </div>
                        {/* List Related Cards */}
                        <div className="flex flex-col gap-5 justify-center">
                            {[1, 2, 3].map((i) => (
                                <div key={i} className="flex gap-4">
                                    <Skeleton className="w-28 h-20 rounded-lg shrink-0" />
                                    <div className="flex-1 space-y-2 pt-1">
                                        <Skeleton className="h-4 w-full" />
                                        <Skeleton className="h-4 w-3/4" />
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>

                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-3/4" />
            </div>

            {/* --- BOTTOM CTA --- */}
            <div className="bg-muted/30 border rounded-lg p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
                <div className="space-y-2 w-full sm:w-auto">
                    <Skeleton className="h-5 w-48 rounded-md" />
                    <Skeleton className="h-3 w-64 rounded-md" />
                </div>
                <Skeleton className="h-10 w-full sm:w-40 rounded-md" />
            </div>
        </article>
    );
}