import { useLoaderData } from 'react-router';
import { useState } from 'react';
import { Header } from './header';
import { Footer } from './footer';
import { ControlBar } from './control_bar';
import { PhotoCard } from './photo_card';

export function PhotoGallery({ numColumns }) {
	const imageData = useLoaderData();
	const [isGallery, setGallery] = useState(false);
	return (
		<div>
			<Header isGallery={isGallery} handleClick={()=> setGallery(!isGallery)} />
			<Photos 
				imageData={imageData}
				isGallery={isGallery}
			/>
			<Footer />
		</div>
	);
}

function Photos({ imageData, isGallery}) {
	const listClassNames = "flex flex-wrap"
	const galleryClassNames = "grid md:grid-cols-2 xl:grid-cols-3"
	const photoCards = imageData.map(image =>
		<PhotoCard
			key={image.id}
			data={image}
		/>);
	return (
		<div className={`${isGallery ? galleryClassNames : listClassNames} md:m-20 md:mt-10 m-10 gap-10 mt-10 xl:ml-50 xl:mr-50`}>
			{photoCards}
		</div>
	);
}