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

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, 10);

	return (
		<div>
			<h2>Recent</h2>
			<For each={latestImages()}>
				{(image) => <ImageComponent ID={image.ImageID} />}
			</For>
		</div>
	);
};
