'use client';

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

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

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

const Statistics = () => {
	return (
		<div className='accountContainer'>
			<div className='header'>
				<div className='infosContainer'>
					<p className='username'>Un Épicier</p>
					<p className='sinceDate'>Créé le: 02/09/2024</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;