import styles from './page.module.css';
import { Suspense } from 'react';
import PhotoList from '@/components/photolist';
import PhotoListSkeleton from '@/components/photolistskeleton';

interface IPhotosPromise {
  params: Promise<{ albumId: number }>
}

export default async function PhotosPage({ params } : IPhotosPromise) {
  const { albumId } = await params
  return (
    <div className={styles.shape}>
      {/* This content will be sent to the client immediately */}
      <header>
        <h1>Album Photos {albumId}</h1>
      </header>
      <main>
        {/* Any content wrapped in a <Suspense> boundary will be streamed */}
        <Suspense fallback={<PhotoListSkeleton />}>
          <PhotoList albumId={albumId} />
        </Suspense>
      </main>
    </div >
  );
}