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

export default function Loading() {
  return (
    <div className="container mx-auto px-4 py-8 bg-[#0F0F12]">
      {/* Breadcrumb Skeleton */}
      <div className="mb-6">
        <Skeleton className="h-4 w-48 bg-[#202026]" />
      </div>

      {/* Author Profile Skeleton */}
      <div className="bg-[#202026] border-l-4 border-primary rounded-lg p-8 mb-8 shadow-sm">
        <Skeleton className="h-10 w-64 mb-2 bg-[#202026]" />
        <Skeleton className="h-4 w-32 mb-4 bg-[#202026]" />
        <Skeleton className="h-20 w-full bg-[#202026]" />
      </div>

      {/* Articles Grid Skeleton */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {[...Array(6)].map((_, i) => (
          <div key={i} className="bg-[#202026] rounded-lg overflow-hidden border border-[#2A2A33]">
            <Skeleton className="h-48 w-full bg-[#202026]" />
            <div className="p-4 space-y-3">
              <Skeleton className="h-4 w-20 bg-[#202026]" />
              <Skeleton className="h-6 w-full bg-[#202026]" />
              <Skeleton className="h-4 w-full bg-[#202026]" />
              <Skeleton className="h-4 w-3/4 bg-[#202026]" />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
