import { ListCardSkeleton } from '@/components/SkeletonLoader'

export default function Loading() {
  return (
    <main className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-7xl">
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6 sm:mb-8">
        <div className="h-10 w-48 bg-gray-200 rounded animate-pulse" />
        <div className="h-12 w-32 bg-gray-200 rounded-lg animate-pulse" />
      </div>

      {/* Global Search Skeleton */}
      <div className="mb-6 sm:mb-8">
        <div className="h-12 bg-gray-100 border border-gray-300 rounded-lg animate-pulse" />
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
        <ListCardSkeleton />
        <ListCardSkeleton />
        <ListCardSkeleton />
        <ListCardSkeleton />
      </div>
    </main>
  )
}