import { Skeleton, ArticleSkeleton } from '@/components/ui/Skeleton';

// Route-level skeleton for the event detail page: back link, banner, article
// body on the left and the booking card in the sidebar.
export default function EventDetailLoading() {
  return (
    <div className="section-padding">
      <div className="container-page">
        <Skeleton className="h-5 w-36" />
        <div className="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2">
            <ArticleSkeleton withBanner />
          </div>
          <div>
            <div className="bg-white rounded-card shadow-card p-6" aria-hidden="true">
              <div className="text-center">
                <Skeleton className="h-4 w-16 mx-auto" />
                <Skeleton className="mt-3 h-10 w-32 mx-auto" />
              </div>
              <Skeleton className="mt-6 h-12 w-full rounded-btn" />
              <Skeleton className="mt-3 h-4 w-3/4 mx-auto" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}