import MediaGrid from '@/components/project/MediaGrid';
import { fetchProjectClass, fetchProjectMedia } from '@/lib/fetch';
import ProjectChat from '@/components/project/ProjectChat';
import ClassBar from '@/components/project/ClassBar';

interface PageProps {
  params: {
    projectId: string;
  };
}

export default async function Page({ params }: PageProps) {
  const { projectId } = params;

  const [mediaList, classList] = await Promise.all([
    fetchProjectMedia({ projectId: Number(projectId) }),
    fetchProjectClass({ projectId: Number(projectId) }),
  ]);

  return (
    <div className="pt-4 md:pt-10 h-full">
      <div className="flex h-full">
        <div className="w-1/2 relative border-r border-gray-300 overflow-auto">
          <ClassBar classList={classList} />
          <MediaGrid mediaList={mediaList} />
        </div>
        <div className="w-1/2 relative overflow-auto">
          <ProjectChat mediaList={mediaList} />
        </div>
      </div>
    </div>
  );
}