import { Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { textClasses } from 'styles';
import LinkGroups from './LinkGroups';

function Links({ contentType }: any) {
	const { isMobile, linksIsFetched, groupsIsFetched, groupData, bookmarkData } =
		useCommonHooks();
	return (
		<>
			{groupsIsFetched &&
				linksIsFetched &&
				groupData?.length > 0 &&
				contentType.length > 0 && (
					<Stack id='links' style={{ gap: 0 }}>
						<Text className={textClasses.sectionTitle} classNames={textClasses}>
							Bookmarks
						</Text>
						<Stack
							style={{
								display: 'grid',
								flexWrap: 'nowrap',
								gridColumnGap: '20px',
								gridRowGap: '0px',
								gridTemplateColumns: isMobile ? '1fr 1fr' : '1fr 1fr 1fr 1fr 1fr',
								gridTemplateRows: 'auto',
							}}
						>
							{groupData.map((category: any) => {
								if (
									contentType.includes(category.filterName) ||
									contentType.includes('All')
								) {
									return (
										<LinkGroups
											key={category}
											category={category.categoryName}
											links={bookmarkData.filter(
												(bookmark: any) => bookmark.category === category.categoryName,
											)}
										/>
									);
								}
							})}
						</Stack>
					</Stack>
				)}
		</>
	);
}

export default Links;