import React from 'react';
import ContentLoader from 'react-content-loader';
import useGeneralStore from '../hooks/stores/useGeneralStore';

const SingleRectLoader = () => {
	const selectedStyle = useGeneralStore((state) => state.selectedStyle);
	const backgroundColor = selectedStyle === 'Tomorrow' ? '#333' : '#f3f3f3';
	const foregroundColor = selectedStyle === 'Tomorrow' ? '#555' : '#ecebeb';

	return (
		<ContentLoader
			speed={2}
			width={150}
			height={215}
			viewBox='0 0 150 215'
			backgroundColor={backgroundColor}
			foregroundColor={foregroundColor}
			style={{
				width: '150px',
				height: '215px',
				marginRight: '30px',
				marginBottom: '30px',
			}}
		>
			<rect x={0} y={0} width='150' height='150' />
			<rect x={0} y={170} width='150' height='18' />
			<rect x={0} y={195} width='80' height='20' />
		</ContentLoader>
	);
};

const CatalogLoader = () => {
	return (
		<div
			style={{
				display: 'flex',
				flexWrap: 'wrap',
				justifyContent: 'center',
				boxSizing: 'border-box',
			}}
		>
			{[...Array(24)].map((_, index) => (
				<SingleRectLoader key={index} />
			))}
		</div>
	);
};

export default CatalogLoader;
