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

export default function MediaGrid({
  mediaList,
}: {
  mediaList: MediaDetails[];
}) {
  return (
    <div className="relative size-full p-3 max-w-3xl mx-auto">
      <div className="columns-1 sm:columns-1 md:columns-2 lg:columns-2 xl:columns:3 gap-3 [&>img:not(:first-child)]:mt-3">
        {mediaList.map(media => (
          <MediaTile key={media.id} media={media} />
        ))}
      </div>
    </div>
  );
}