import { Component, For } from "solid-js";
import { ImageComponent } from "@components/image";
import { useSearchImageContext } from "@contexts/SearchImageContext";

const NUMBER_OF_MAX_RECENT_IMAGES = 10;

export const Recent: Component = () => {
	const { userImages } = useSearchImageContext();

	const latestImages = () =>
		userImages()
			.sort(
				(a, b) =>
					new Date(b.CreatedAt!).getTime() - new Date(a.CreatedAt!).getTime(),
			)
			.slice(0, NUMBER_OF_MAX_RECENT_IMAGES);

	return (
		<div class="rounded-xl bg-white p-4 flex flex-col gap-2">
			<h2 class="text-xl font-bold">Recent Screenshots</h2>
			<div class="grid grid-cols-3 gap-4 place-items-center">
				<For each={latestImages()}>
					{(image) => <ImageComponent ID={image.ImageID} />}
				</For>
			</div>
		</div>
	);
};
