import { PackagesGridSkeleton } from "@/components/shared/skeletons";
import { getFixPackagesListAction } from "@/features/fixed-packages/actions/fix-packages-actions";
import { Package } from "lucide-react";
import { Suspense } from "react";
import { FixedPackagesContent } from "./fixed-packages-content";

export const dynamic = "force-dynamic";

async function PackagesList() {
  const result = await getFixPackagesListAction(undefined, 1);
  const paginator = result.success && result.data ? result.data : null;
  const packages = paginator?.data ?? [];
  return (
    <FixedPackagesContent
      initialPackages={packages}
      initialPagination={paginator}
    />
  );
}

export default function FixedPackagesPage() {
  return (
    <div className="min-h-screen bg-gray-50">
      <main className="container mx-auto px-4 py-6 md:px-6 lg:px-8">
        {/* Hero Header */}
        <div className="relative mb-8 p-6 md:p-8 rounded-2xl bg-gradient-to-r from-[#010e2a] via-[#023047] to-[#010e2a] overflow-hidden shadow-xl">
          <div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
          <div className="relative z-10 flex items-center gap-4">
            <div className="p-3 rounded-xl bg-white/10 backdrop-blur-sm border border-white/10">
              <Package className="h-8 w-8 text-white" />
            </div>
            <div>
              <h1 className="text-2xl md:text-4xl font-bold text-white">
                Fixed Packages
              </h1>
              <p className="text-gray-200 text-sm md:text-base mt-1">
                Pre-planned spiritual journeys to India&apos;s sacred
                destinations
              </p>
            </div>
          </div>
        </div>

        <Suspense fallback={<PackagesGridSkeleton />}>
          <PackagesList />
        </Suspense>
      </main>
    </div>
  );
}