import { fetchProjectMedia } from '@/lib/fetch/clef';
import MediaTile from './MediaTile';

export default async function MediaGrid({ projectId }: { projectId: number }) {
	const mediaList = await fetchProjectMedia({ projectId });

	return (
		<div className="relative size-full p-6 max-w-3xl mx-auto">
			<div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4">
				{mediaList.map(media => (
					<MediaTile key={media.id} media={media} />
				))}
			</div>
		</div>
	);
}