import { Component, For } from "solid-js";
import { A } from "@solidjs/router";
import {
	SearchImageStore,
	useSearchImageContext,
} from "@contexts/SearchImageContext";

// TODO: lots of stuff to do with Entities, this could be seperated into a centralized place.
const CategoryColor: Record<
	keyof ReturnType<SearchImageStore["categories"]>,
	string
> = {
	contact: "bg-orange-50",
	location: "bg-red-50",
	event: "bg-purple-50",
	note: "bg-green-50",
};

export const Categories: Component = () => {
	const { categories } = useSearchImageContext();

	return (
		<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-4 rounded-xl bg-white p-4">
			<For each={Object.entries(categories())}>
				{([category, group]) => (
					<A
						href={`/gallery/${category}`}
						class={
							"col-span-2 flex flex-col justify-center items-center rounded-lg p-4 border border-neutral-200 " +
							"capitalize " +
							CategoryColor[category as keyof typeof CategoryColor] +
							" " +
							(group.length === 0 ? "row-span-1 order-10" : "row-span-2")
						}
					>
						<p class="text-xl font-bold">{category}s</p>
						<p class="text-lg">{group.length}</p>
					</A>
				)}
			</For>
		</div>
	);
};