'use client';

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

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

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

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

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

	if (!userData) {
		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>

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

export default Statistics;