import { useState } from 'react';

import type { PicsumData } from '../api/picsum';

// A Card, rendering an image and toggling photographer information when clicked
export function PhotoCard({ data }: {data: PicsumData}) {
	const [infoToggled, setInfoToggled] = useState(false);

	function handleClick() {
		setInfoToggled(!infoToggled);
	}

	return (
		<div>
		<div className="relative flex justify-center">
			<div onClick={handleClick} className="overflow-hidden rounded-2xl">
				<img className={`transition-blur duration-500 ease-in-out ${infoToggled ? 'blur-sm' : 'blur-none'}`}
					 src={data["download_url"]}
				/>
			</div>
			<p className={`font-libre absolute self-center text-center bg-mist-500/70 p-2 rounded-lg text-white transition-opacity duration-500 ease-in-out ${infoToggled ? 'opacity-100' : 'opacity-0'}`}
			  onClick={handleClick}
			>
				Photographer: {data['author']}
			</p>
		</div>
		</div>
	);
}