import { Skeleton } from '@/components/ui/skeleton';

export default function Loading() {
  return (
    <div className="container py-8 bg-[#0F0F12]">
      {/* Breadcrumb Skeleton */}
      <div className="flex items-center gap-2 mb-6">
        <Skeleton className="h-4 w-16 bg-[#202026]" />
        <Skeleton className="h-4 w-4 bg-[#202026]" />
        <Skeleton className="h-4 w-32 bg-[#202026]" />
        <Skeleton className="h-4 w-4 bg-[#202026]" />
        <Skeleton className="h-4 w-48 bg-[#202026]" />
      </div>

      {/* Article Header Skeleton */}
      <div className="mb-8">
        <Skeleton className="h-12 w-full mb-4 bg-[#202026]" />
        <div className="flex items-center gap-4 mb-4">
          <Skeleton className="h-5 w-20 bg-[#202026]" />
          <Skeleton className="h-5 w-32 bg-[#202026]" />
          <Skeleton className="h-5 w-24 bg-[#202026]" />
          <Skeleton className="h-6 w-24 rounded-full bg-[#202026]" />
        </div>
      </div>

      {/* Hero Image Skeleton */}
      <Skeleton className="w-full h-[400px] rounded-lg mb-8 bg-[#202026]" />

      {/* Two Column Layout */}
      <div className="grid grid-cols-1 lg:grid-cols-[250px_1fr] gap-8 mb-12">
        {/* TOC Skeleton (hidden on mobile) */}
        <aside className="hidden lg:block">
          <div className="sticky top-20 rounded-lg border border-[#2A2A33] bg-[#202026] p-4 shadow-sm">
            <Skeleton className="h-6 w-20 mb-4 bg-[#202026]" />
            <div className="space-y-2">
              <Skeleton className="h-4 w-full bg-[#202026]" />
              <Skeleton className="h-4 w-full bg-[#202026]" />
              <Skeleton className="h-4 w-3/4 bg-[#202026]" />
              <Skeleton className="h-4 w-full bg-[#202026]" />
              <Skeleton className="h-4 w-5/6 bg-[#202026]" />
            </div>
          </div>
        </aside>

        {/* Article Content Skeleton */}
        <article className="space-y-6">
          <Skeleton className="h-8 w-3/4 bg-[#202026]" />
          <Skeleton className="h-4 w-full bg-[#202026]" />
          <Skeleton className="h-4 w-full bg-[#202026]" />
          <Skeleton className="h-4 w-5/6 bg-[#202026]" />
          
          <Skeleton className="h-6 w-2/3 mt-8 bg-[#202026]" />
          <Skeleton className="h-4 w-full bg-[#202026]" />
          <Skeleton className="h-4 w-full bg-[#202026]" />
          <Skeleton className="h-4 w-4/5 bg-[#202026]" />
          
          <Skeleton className="h-64 w-full rounded-lg my-6 bg-[#202026]" />
          
          <Skeleton className="h-6 w-1/2 bg-[#202026]" />
          <Skeleton className="h-4 w-full bg-[#202026]" />
          <Skeleton className="h-4 w-full bg-[#202026]" />
          <Skeleton className="h-4 w-3/4 bg-[#202026]" />
        </article>
      </div>

      {/* Related Articles Skeleton */}
      <section>
        <Skeleton className="h-8 w-32 mb-6 bg-[#202026]" />
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {[...Array(4)].map((_, i) => (
            <div key={i} className="space-y-3">
              <Skeleton className="h-40 rounded-lg bg-[#202026]" />
              <Skeleton className="h-6 w-20 rounded-full bg-[#202026]" />
              <Skeleton className="h-5 w-full bg-[#202026]" />
              <Skeleton className="h-4 w-full bg-[#202026]" />
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}
