import { Stack, Text } from '@mantine/core';
import { textClasses } from 'styles';
import type { Bookmark } from 'types';
import BookmarkItem from './BookmarkItem';

function BookmarkGroups({
	bookmarks,
	category,
}: {
	bookmarks: Bookmark[];
	category: string;
}) {
	return (
		<Stack
			style={{
				display: 'block',
				overflow: 'hidden',
				whiteSpace: 'nowrap',
			}}
		>
			<Text className={textClasses.bookmarkCategory} classNames={textClasses}>
				{category}
			</Text>
			{bookmarks
				?.toSorted((a: Bookmark, b: Bookmark) => (a.index > b.index ? 1 : -1))
				.map((bookmark: Bookmark) => (
					<BookmarkItem key={bookmark.name} bookmark={bookmark} />
				))}
		</Stack>
	);
}

export default BookmarkGroups;