'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 { isLoading, userData } = useData();

	if (!userData) {
		return;
	}

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

	if (isLoading) {
		return <></>;
	}

	return (
		<div className='accountContainer'>
			<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;