no-copy-frontend/src/app/ui/marking-page/protection-summary.tsx

'use client'

import { useTranslations } from 'next-intl';
import { useQuery } from '@tanstack/react-query';
import { getUserFilesData } from '@/app/actions/fileEntity';

type FilesInfo = {
	totalSize: string;
	totalCount: number;
};


export default function ProtectionSummary() {
	const t = useTranslations('Global');

	const {
		data: filesInfo,
		isLoading,
		isError,
		error,
	} = useQuery<{
		formattedTotalSize: string,
		totalCount: number
	}, Error, FilesInfo>({
		queryKey: ['userFilesData'],
		queryFn: getUserFilesData,
		select: (data): FilesInfo => {
			if (!data) {
				return {
					totalSize: '0',
					totalCount: 0
				}
			}

			return {
				totalSize: data.formattedTotalSize,
				totalCount: (data.totalCount)
			}
		},
	});


	return (
		<div className="protection-overview grow">
			<h3>{t('protecting-your-content')}</h3>
			<p>{t('current-status-of')}</p>
			<div className="protection-stats">
				<div className="protection-stat total-files">
					<div className="protection-stat-value">{filesInfo?.totalCount ? filesInfo?.totalCount : 0}</div>
					<div className="protection-stat-label">{t('total-files')}</div>
				</div>
				<div className="protection-stat total-checks">
					<div className="protection-stat-value">0</div>
					<div className="protection-stat-label">{t('check')}</div>
					<div className="protection-stat-value">0</div>
					<div className="protection-stat-label">{t('violations')}</div>
				</div>
				<div className="protection-stat total-usage">
					<div className="protection-stat-value">{filesInfo?.totalSize ? filesInfo?.totalSize : 0} / 0</div>
					<div className="protection-stat-label">
						{t('disk-space-used')}
					</div>
				</div>
			</div>
		</div>
	)
}