no-copy-frontend/src/app/ui/search/search-stats.tsx

'use client'

import { useUserSearchData } from '@/app/hooks/react-query/useUserSearchData';

export function SearchStats() {
	const { data: userSearchData, isLoading, isError, error, } = useUserSearchData()

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

			<div className="stat-item">
				<span className="stat-label">Изображения</span>
				<span className="stat-value">
					{userSearchData?.image?.count ? userSearchData?.image?.count : 0}
				</span>
			</div>

			<div className="stat-item">
				<span className="stat-label">Видео</span>
				<span className="stat-value">
					{userSearchData?.video?.count ? userSearchData?.video?.count : 0}
				</span>
			</div>

			<div className="stat-item">
				<span className="stat-label">Аудио</span>
				<span className="stat-value">
					{userSearchData?.audio?.count ? userSearchData?.audio?.count : 0}
				</span>
			</div>

			<div className="stat-item">
				<span className="stat-label">Документы</span>
				<span className="stat-value">
					{userSearchData?.document?.count ? userSearchData?.document?.count : 0}
				</span>
			</div>

			<div className="stat-item">
				<span className="stat-label">Всего поисков</span>
				<span className="stat-value">
					{userSearchData?.allCountForPeriod ? userSearchData?.allCountForPeriod : 0}
				</span>
			</div>
		</div>
	)
}