import { Suspense } from "react";

import { MobileShell } from "@/app/_components/core";

import { TipPageClient } from "./tip-page-client";

export default function TipPage() {
  return (
    <Suspense fallback={<TipFallback />}>
      <TipPageClient />
    </Suspense>
  );
}

function TipFallback() {
  return (
    <MobileShell background="#fff6ed">
      <div
        style={{
          minHeight: "60vh",
          display: "grid",
          placeItems: "center",
          padding: "2rem",
          color: "#8b6265",
        }}
      >
        Loading tip...
      </div>
    </MobileShell>
  );
}
