import type { Metadata } from "next";
import { Suspense } from "react";
import { ProtectedRoute } from "@/components/AuthGuards";
import BusinessesPage from "@/components/BusinessesPage";
import DashboardShell from "@/components/DashboardShell";

export const metadata: Metadata = {
  title: "Businesses | IranBay Dashboard",
};

export default function BusinessesRoute() {
  return (
    <ProtectedRoute requiredApp="admin">
      <DashboardShell>
        <Suspense
          fallback={
            <div
              style={{
                minHeight: 220,
                display: "grid",
                placeItems: "center",
                fontSize: 12,
                letterSpacing: "0.2em",
                textTransform: "uppercase",
                color: "#8e8e8e",
              }}
            >
              Loading businesses…
            </div>
          }
        >
          <BusinessesPage />
        </Suspense>
      </DashboardShell>
    </ProtectedRoute>
  );
}