'use client'

import * as React from 'react';

export default function Home() {
	const [train, setTrain] = React.useState({ train: { NUMBER: 0, DESTINATION: '' }, user: [{ USERNAME: '' }] });

	React.useEffect(() => {
		const fetchTrain = async () => {
			const response = await fetch('/api/tod');
			if (response.ok) {
				const data = await response.json();
				if (data.train) {
					setTrain(data);
					document.querySelector('.train').classList.add('moving');
				}
			}
		}
		fetchTrain();
		fetch('/api/stats', { method: 'POST', body: JSON.stringify({ type: 'VISIT', page: window.location.pathname, element: 'no' }) });
	}, []);

	return (
		<div className="home-background">
			<h2 style={{ position: 'relative', textAlign: 'center', marginTop: '150px' }}>InfoGare</h2>
			<div className="bg-1"></div>
			<div className="bg-2"></div>
			<div className="train">
				<div className="train-text">Train N°{train.train.NUMBER} à destination de {train.train.DESTINATION} ({train.user[0].USERNAME})</div>
				<div className="moving-train">
					<div className="wagon-l"></div>
					<div className="wagon-m"></div>
					<div className="wagon-r"></div>
				</div>
			</div>
		</div>
	);
}
