// app/(auth)/verify-otp/page.tsx
import { Suspense } from 'react';
import { VerifyOTPForm } from '@/components/auth/VerifyOTPForm';
import { getDynamicImages } from '@/lib/api/client';

const SECURITY_KEY = process.env.NEXT_PUBLIC_SECURITY_KEY!;
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;

async function getVerifyOTPData() {
  try {
    // ✅ Fetch all three - images, storeLinks, and pageData
    const [images, storeLinks, pageData] = await Promise.all([
      getDynamicImages(SECURITY_KEY),
      fetch(`${BASE_URL}/social/getStoreIcons`).then(res => res.json()).catch(() => ({ data: [] })),
      fetch(`${BASE_URL}/page/getPageById?pageId=69019337776706b9e475a818`).then(res => res.json()).catch(() => ({ data: null })),
    ]);
    
    return {
      logoImage: images?.data,
      storeLinks: storeLinks?.data || [],
      pageData: pageData?.data,
    };
  } catch (error) {
    return {
      logoImage: null,
      storeLinks: [],
      pageData: null,
    };
  }
}

export default async function VerifyOTPPage() {
  const { logoImage, storeLinks, pageData } = await getVerifyOTPData();

  return (
    <div className="min-h-screen flex items-center justify-center">
      <Suspense fallback={<div className="w-[450px] h-[500px] bg-gray-100 animate-pulse rounded-2xl" />}>
        <VerifyOTPForm 
          logoImage={logoImage} 
          storeLinks={storeLinks}
          pageData={pageData}
        />
      </Suspense>
    </div>
  );
}