'use client'

import { useTranslations } from 'next-intl';
import {convertBytes} from '@/app/lib/convertBytes';
import {useUserFilesInfo} from '@/app/hooks/react-query/useUserFilesInfo';

export default function DashboardUserStats() {
	const t = useTranslations("Global");
	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();

	return (
		<div className="dashboard-user-stats">

			<div className="stat-card projects">
				<div className="stat-type">ЗАЩИЩЁННЫЕ ФАЙЛЫ</div>
				<div className="stat-value">{filesInfo?.total.protected ? filesInfo?.total.protected : 0}</div>
				<div className="stat-label">Файлов под защитой</div>
				<div className="stat-icon">🛡️</div>
			</div>

			<div className="stat-card matches">
				<div className="stat-type">СОВПАДЕНИЯ</div>
				<div className="stat-value">0</div>
				<div className="stat-label">Найдено совпадений</div>
				<div className="stat-icon">🔍</div>
			</div>

			<div className="stat-card violations">
				<div className="stat-type">НАРУШЕНИЯ</div>
				<div className="stat-value">{filesInfo?.total.violation ? filesInfo?.total.violation : 0}</div>
				<div className="stat-label">Требуют внимания</div>
				<div className="stat-icon">⚠️</div>
			</div>

			<div className="stat-card storage">
				<div className="stat-type">ХРАНИЛИЩЕ</div>
				<div className="stat-value">
					{filesInfo?.total.size ? convertBytes(filesInfo?.total.size) : 0}
				</div>
				<div className="stat-label">Использовано места</div>
				<div className="stat-icon">💾</div>
			</div>

			<div className="stat-card legal">
				<div className="stat-type">ЖАЛОБЫ</div>
				<div className="stat-value">0</div>
				<div className="stat-label">Отправлено юристам</div>
				<div className="stat-icon">⚖️</div>
			</div>
		</div>
	)
}