no-copy-frontend/src/app/ui/my-content/my-content-info-block.tsx

'use client'

import { IconDocument, IconImageFile, IconVideoFile, IconAudioFile } from '@/app/ui/icons/icons';
import { useQuery } from '@tanstack/react-query';
import { getUserFilesInfo } from '@/app/actions/action';
import {useTranslations, useLocale} from 'next-intl';
import { convertBytes } from '@/app/lib/convertBytes';
import { pluralize } from '@/app/lib/pluralize';

export default function MyContentInfoBlock() {
	const locale = useLocale();
	const t = useTranslations('Global');

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

	const fileTypeSizePercents = () => {
		if (!filesInfo?.all_files_size) {
			return {
				images: 0,
				videos: 0,
				audios: 0,
				documents: 0,
			};
		}

		const sizes = {
			images: filesInfo.images_size || 0,
			videos: filesInfo.videos_size || 0,
			audios: filesInfo.audios_size || 0,
			documents: filesInfo.documents_size || 0,
		};

		const total = filesInfo.all_files_size;

		const rawPercents = {
			images: (sizes.images / total) * 100,
			videos: (sizes.videos / total) * 100,
			audios: (sizes.audios / total) * 100,
			documents: (sizes.documents / total) * 100,
		};

		const roundedPercents = {
			images: Math.floor(rawPercents.images),
			videos: Math.floor(rawPercents.videos),
			audios: Math.floor(rawPercents.audios),
			documents: Math.floor(rawPercents.documents),
		};

		const remainder = 100 - Object.values(roundedPercents).reduce((a, b) => a + b, 0);

		const fractions = Object.entries(rawPercents).map(([key, value]) => ({
			key,
			fraction: value - Math.floor(value)
		})).sort((a, b) => b.fraction - a.fraction);

		const result = { ...roundedPercents };
		for (let i = 0; i < remainder; i++) {
			result[fractions[i].key as keyof typeof result]++;
		}

		return result;
	};

	const pluralizeFiles = (number: number) => {
		const translate = [t('file'), t('files-few'), t('files')];
		return pluralize(number, translate[0], translate[1], translate[2], locale);
	};

	return (
		<div className="block-wrapper auto grow">
			<div className="file-stats-container">
				<div className="file-stats-grid">
					<div className="file-stat-card">
						<div className="file-stat-content">
							<div className="file-stat-icon-wrapper image-icon">
								<IconImageFile />
							</div>
							<div className="file-stat-info">
								<h4 className="file-stat-title">{t('images-few')}</h4>
								<span className="file-stat-usage">{fileTypeSizePercents().images}%</span>
							</div>
						</div>
						<div className="file-stat-details">
							<span className="file-stat-count">
								{filesInfo.images_quantity || 0} {pluralizeFiles(filesInfo.images_quantity || 0)}
							</span>
							<span className="file-stat-size">
								{filesInfo.images_size ? convertBytes(filesInfo.images_size) : 0}
							</span>
						</div>
					</div>

					<div className="file-stat-card">
						<div className="file-stat-content">
							<div className="file-stat-icon-wrapper video-icon">
								<IconVideoFile />
							</div>
							<div className="file-stat-info">
								<h4 className="file-stat-title">{t('videos')}</h4>
								<span className="file-stat-usage">{fileTypeSizePercents().videos}%</span>
							</div>
						</div>
						<div className="file-stat-details">
							<span className="file-stat-count">
								{filesInfo.videos_quantity || 0} {pluralizeFiles(filesInfo.videos_quantity || 0)}
							</span>
							<span className="file-stat-size">
								{filesInfo.videos_size ? convertBytes(filesInfo.videos_size) : 0}
							</span>
						</div>
					</div>

					<div className="file-stat-card">
						<div className="file-stat-content">
							<div className="file-stat-icon-wrapper audio-icon">
								<IconAudioFile />
							</div>
							<div className="file-stat-info">
								<h4 className="file-stat-title">{t('audios')}</h4>
								<span className="file-stat-usage">{fileTypeSizePercents().audios}%</span>
							</div>
						</div>
						<div className="file-stat-details">
							<span className="file-stat-count">
								{filesInfo.audios_quantity || 0} {pluralizeFiles(filesInfo.audios_quantity || 0)}
							</span>
							<span className="file-stat-size">
								{filesInfo.audios_size ? convertBytes(filesInfo.audios_size) : 0}
							</span>
						</div>
					</div>

					<div className="file-stat-card">
						<div className="file-stat-content">
							<div className="file-stat-icon-wrapper document-icon">
								<IconDocument />
							</div>
							<div className="file-stat-info">
								<h4 className="file-stat-title">{t('documents')}</h4>
								<span className="file-stat-usage">{fileTypeSizePercents().documents}%</span>
							</div>
						</div>
						<div className="file-stat-details">
							<span className="file-stat-count">
								{filesInfo.documents_quantity || 0} {pluralizeFiles(filesInfo.documents_quantity || 0)}
							</span>
							<span className="file-stat-size">
								{filesInfo.documents_size ? convertBytes(filesInfo.documents_size) : 0}
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	)
}