'use client'

import { useTranslations } from 'next-intl';
import { useQuery } from '@tanstack/react-query';
import { getUserFilesInfo } from '@/app/actions/action';
import {convertBytes} from '@/app/lib/convertBytes';
import { useEffect } from 'react';

export default function ReportsInfo() {
	const t = useTranslations("Global");

	const {
		data: filesInfo,
		isLoading,
		isError,
		error,
	} = useQuery({
		queryKey: ['userFilesInfo'],
		queryFn: getUserFilesInfo,
	});

	return (
		<div className="dashboard-files-info">
			<div className="type-card images">
				<div className="stat-type">
					{t('all-content')}
				</div>
				<div className="stat-value">{filesInfo?.all_files_quantity ? filesInfo?.all_files_quantity : 0}</div>
			</div>

			<div className="type-card videos">
				<div className="stat-type">
					{t('violations-few')}
				</div>
				<div className="stat-value">{filesInfo?.all_files_violation ? filesInfo?.all_files_violation : 0}</div>
			</div>

			<div className="type-card audio">
				<div className="stat-type">
					{t('monitoring')}
				</div>
				<div className="stat-value">{filesInfo?.all_files_check ? filesInfo?.all_files_check : 0}</div>
			</div>

			<div className="type-card scripts">
				<div className="stat-type">
					{t('efficiency')}
				</div>
				<div className="stat-value">100%</div>
			</div>
		</div>
	)
}