thrillwiki_django_no_react/frontend/src/app/parks/[slug]/loading.tsx

export default function ParkDetailLoading() {
  return (
    <main className="container mx-auto px-4 py-8 animate-pulse">
      <article className="bg-white rounded-lg shadow-lg p-6">
        {/* Header skeleton */}
        <header className="mb-8">
          <div className="h-10 w-3/4 bg-gray-200 rounded mb-4"></div>
          <div className="flex items-center gap-4">
            <div className="h-6 w-24 bg-gray-200 rounded-full"></div>
            <div className="h-6 w-32 bg-gray-200 rounded"></div>
          </div>
        </header>

        {/* Description skeleton */}
        <section className="mb-8">
          <div className="space-y-2">
            <div className="h-4 bg-gray-200 rounded w-full"></div>
            <div className="h-4 bg-gray-200 rounded w-5/6"></div>
            <div className="h-4 bg-gray-200 rounded w-4/6"></div>
          </div>
        </section>

        {/* Details skeleton */}
        <section className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
          <div>
            <div className="h-8 w-32 bg-gray-200 rounded mb-4"></div>
            <div className="space-y-4">
              {[...Array(4)].map((_, i) => (
                <div key={i} className="grid grid-cols-2 gap-4">
                  <div className="h-6 bg-gray-200 rounded"></div>
                  <div className="h-6 bg-gray-200 rounded"></div>
                </div>
              ))}
            </div>
          </div>
          <div>
            <div className="h-8 w-32 bg-gray-200 rounded mb-4"></div>
            <div className="bg-gray-100 p-4 rounded-lg">
              <div className="space-y-2">
                <div className="h-6 bg-gray-200 rounded"></div>
                <div className="h-6 bg-gray-200 rounded"></div>
              </div>
            </div>
          </div>
        </section>

        {/* Areas skeleton */}
        <section className="mb-8">
          <div className="h-8 w-32 bg-gray-200 rounded mb-4"></div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {[...Array(3)].map((_, i) => (
              <div key={i} className="bg-gray-50 p-4 rounded-lg">
                <div className="h-6 bg-gray-200 rounded mb-2"></div>
                <div className="h-4 bg-gray-200 rounded w-3/4"></div>
              </div>
            ))}
          </div>
        </section>

        {/* Reviews skeleton */}
        <section className="mb-8">
          <div className="h-8 w-32 bg-gray-200 rounded mb-4"></div>
          <div className="space-y-4">
            {[...Array(2)].map((_, i) => (
              <div key={i} className="bg-gray-50 p-4 rounded-lg">
                <div className="flex justify-between items-start mb-2">
                  <div className="space-y-2">
                    <div className="h-6 bg-gray-200 rounded w-32"></div>
                    <div className="h-4 bg-gray-200 rounded w-24"></div>
                  </div>
                  <div className="h-6 w-24 bg-gray-200 rounded"></div>
                </div>
                <div className="space-y-2 mt-4">
                  <div className="h-4 bg-gray-200 rounded w-full"></div>
                  <div className="h-4 bg-gray-200 rounded w-5/6"></div>
                </div>
                <div className="mt-2 flex gap-2">
                  {[...Array(2)].map((_, j) => (
                    <div key={j} className="w-24 h-24 bg-gray-200 rounded"></div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Photos skeleton */}
        <section>
          <div className="h-8 w-32 bg-gray-200 rounded mb-4"></div>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            {[...Array(8)].map((_, i) => (
              <div key={i} className="aspect-square bg-gray-200 rounded-lg"></div>
            ))}
          </div>
        </section>
      </article>
    </main>
  );
}