import type { ReactNode } from "react";
import { Suspense } from "react";

import { DrawResultDetailScreen } from "@/features/results/draw-result-detail-screen";

type PageProps = {
  params: Promise<{ drawNo: string }>;
};

function DetailFallback(): ReactNode {
  return <div className="min-h-40" aria-hidden />;
}

export default async function DrawResultByNoPage(props: PageProps) {
  const { drawNo: raw } = await props.params;
  const drawNo = decodeURIComponent(raw);

  return (
    <div className="flex flex-col gap-3">
      <Suspense fallback={<DetailFallback />}>
        <DrawResultDetailScreen drawNo={drawNo} />
      </Suspense>
    </div>
  );
}
