<script>
	import '$lib/css/base.css';
	import '$lib/css/pill.css';
	import '$lib/css/post-min.css';

	import SvgIcon from '@jamescoyle/svelte-icon';
	import { mdiCalendarRange } from '@mdi/js';
	import anime from 'animejs';

	export let cover =
		'https://share.etheryo.fr/Rando-01.11.2023/Alix%20Mange%20Lac%20Rouge%20Bleu%20Orange%20Midi.jpg';
	export let title = 'Title';
	export let date = '01/01/1997';

	let post_div;
	let title_h1;
	let cursorX = 0;
	let cursorY = 0;
	let updateY = true;

	function update_gradient(event, div) {
		const rect = div.getBoundingClientRect();
		if (updateY) {
			cursorY = event.clientY - rect.top;
		}
		cursorX = event.clientX - rect.left;
		post_div.style.backgroundImage = `radial-gradient(circle farthest-corner at ${Math.floor(cursorX)}px ${Math.floor(cursorY)}px, var(--color-background) 0%, #958a98 100%)`;
	}

	function animateForeground(isEntering, div_back) {
		const targetOpacity = isEntering ? 1 : 0;

		anime({
			targets: div_back,
			opacity: [1 - targetOpacity, targetOpacity],
			duration: 400,
			easing: 'easeInOutQuad'
		});
	}
</script>

<div
	role="button"
	tabindex="0"
	class="post-min-container"
	on:mousemove={(event) => {
		update_gradient(event, post_div);
	}}
	on:mouseenter={() => {
		animateForeground(true, post_div);
		title_h1.style.textDecoration = 'underline 2px';
	}}
	on:mouseleave={() => {
		animateForeground(false, post_div);
		title_h1.style.textDecoration = '';
	}}
>
	<div class="post-min">
		<img
			alt="imgcool"
			src={cover}
			on:mouseenter={() => (updateY = false)}
			on:mouseleave={() => (updateY = true)}
		/>
		<h1 bind:this={title_h1}>{title}</h1>
		<div class="pill post-min-pill post-min-end">
			<SvgIcon type="mdi" path={mdiCalendarRange} size="120"></SvgIcon>
			<span>{date}</span>
		</div>
	</div>
	<div class="post-min-overlay-front" />
	<div class="post-min-overlay-back" bind:this={post_div} />
</div>
