'use client';

// ---------------------------------------------------------------------------------------------------------------------
//!                                                      Imports
// ---------------------------------------------------------------------------------------------------------------------

// --------------------------------------------------- Components ------------------------------------------------------
import Link from 'next/link';
import SlotCounter from 'react-slot-counter';
// ---------------------------------------------------------------------------------------------------------------------

// -------------------------------------------------- Hooks & Utils ----------------------------------------------------
import { useRouter } from 'next/navigation';
import { useData } from './hooks/useData';
// ---------------------------------------------------------------------------------------------------------------------

// ------------------------------------------------- Assets & Styles ---------------------------------------------------
import SettingsIcon from '@/assets/SettingsIcon';
import { Logout } from '@/assets/Logout';
import './styles.scss';
// ---------------------------------------------------------------------------------------------------------------------

const Statistics = () => {
	const router = useRouter();
	const { userData } = useData();

	const logout = () => {
		localStorage.clear();
		router.push('/auth/login');
	};

	return (
		<div className='accountContainer'>
			{!userData ? (
				<p className='loading'>Chargement...</p>
			) : (
				<>
					<div className='header'>
						<div className='infosContainer'>
							<p className='username'>{userData.username}</p>
							<p className='sinceDate'>
								Créé le: {userData.createdat}
							</p>
						</div>

						<div className='buttonsContainer'>
							<button
								type='button'
								className='button'
								onClick={logout}
							>
								<Logout />
							</button>
							<Link
								href={'/settings'}
								className='button'
							>
								<SettingsIcon />
							</Link>
						</div>
					</div>

					<div className='statistics'>
						<div className='statistic'>
							<SlotCounter
								value={'00'}
								startValue={'00'}
								startValueOnce
								dummyCharacterCount={10}
								direction='top-down'
								containerClassName='slotCounter'
							/>
							<p className='statName'>Loves par semaine</p>
						</div>
						<div className='statistic'>
							<SlotCounter
								value={'00'}
								startValue={'00'}
								startValueOnce
								dummyCharacterCount={10}
								direction='top-down'
								containerClassName='slotCounter'
							/>
							<p className='statName'>Loves par mois</p>
						</div>
						<div className='statistic'>
							<SlotCounter
								value={'00'}
								startValue={'00'}
								startValueOnce
								dummyCharacterCount={10}
								direction='top-down'
								containerClassName='slotCounter'
							/>
							<p className='statName'>Loves par an</p>
						</div>
						<div className='statistic'>
							<SlotCounter
								value={'00'}
								startValue={'00'}
								startValueOnce
								dummyCharacterCount={10}
								direction='top-down'
								containerClassName='slotCounter'
							/>
							<p className='statName'>Loves total</p>
						</div>
					</div>
				</>
			)}
		</div>
	);
};

export default Statistics;