import { Suspense } from "react";
import { ToursContent } from "./tours-content";
import { SearchBar } from "@/components/search-bar";

// Enable Incremental Static Regeneration - revalidate every 30 minutes
export const revalidate = 1800;

export default function ToursPage() {
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <div className="border-b">
        <div className="container mx-auto px-4 py-12">
          <div className="text-center space-y-4 mb-8">
            <h1 className="text-4xl font-bold tracking-tight">
              Discover Zurich Tours
            </h1>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Explore the best tours and experiences in Switzerland with local guides
            </p>
          </div>
          
          {/* Search Bar */}
          <div className="flex justify-center">
            <Suspense fallback={
              <div className="flex gap-2 w-full max-w-2xl">
                <div className="flex-1 h-10 bg-muted animate-pulse rounded-md" />
                <div className="w-20 h-10 bg-muted animate-pulse rounded-md" />
              </div>
            }>
              <SearchBar />
            </Suspense>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <Suspense fallback={<ToursContentSkeleton />}>
        <ToursContent />
      </Suspense>
    </div>
  );
}

function ToursContentSkeleton() {
  return (
    <div className="container mx-auto px-4 py-8">
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
        {/* Sidebar skeleton */}
        <div className="lg:col-span-1">
          <div className="h-96 bg-muted animate-pulse rounded-lg" />
        </div>

        {/* Tours grid skeleton */}
        <div className="lg:col-span-3">
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
            {Array.from({ length: 6 }).map((_, i) => (
              <div key={i} className="h-80 bg-muted animate-pulse rounded-lg" />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}