'use client'

import { useUserSearchData } from '@/app/hooks/react-query/useUserSearchData';
import { useTranslations } from 'next-intl';
import { useEffect } from 'react';

export function SearchStats() {
	const { data: userSearchData, isLoading, isError, error, } = useUserSearchData();
	const t = useTranslations('Global');

	useEffect(() => {
		console.log(userSearchData);
	}, [userSearchData])

	return (
		<div className="stats-search">
			<div className="stats-title">
				Статистика поиска
			</div>

			<div className="stat-item">
				<span className="stat-label">{t('images')}</span>
				<span className="stat-value">
					{userSearchData?.image?.count ? userSearchData?.image?.count : 0}
				</span>
			</div>

			<div className="stat-item">
				<span className="stat-label">{t('videos')}</span>
				<span className="stat-value">
					{userSearchData?.video?.count ? userSearchData?.video?.count : 0}
				</span>
			</div>

			<div className="stat-item">
				<span className="stat-label">{t('audios')}</span>
				<span className="stat-value">
					{userSearchData?.audio?.count ? userSearchData?.audio?.count : 0}
				</span>
			</div>

			<div className="stat-item">
				<span className="stat-label">{t('documents')}</span>
				<span className="stat-value">
					{userSearchData?.document?.count ? userSearchData?.document?.count : 0}
				</span>
			</div>

			<div className="stat-item">
				<span className="stat-label">{t('total-searhes')}</span>
				<span className="stat-value">
					{userSearchData?.allCountForPeriod ? userSearchData?.allCountForPeriod : 0}
				</span>
			</div>
		</div>
	)
}