//removed
'use client'

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

export default function MyContentPageTitleColorFrame({ title, description }: { title: string, description: string }) {
	const t = useTranslations('Global');

	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();

	return (
		<div className="page-title-color-frame">
			<div className="header-content">
				<div className="header-main">
					<h1>
						{t(title)}
					</h1>
					<p>
						{t(description)}
					</p>
				</div>
				<div className="header-stats">
					<div className="header-stat-item">
						<div className="header-stat-value">{filesInfo?.total.quantity}</div>
						<div className="header-stat-label">Файлов</div>
					</div>
					<div className="header-stat-divider"></div>
					<div className="header-stat-item">
						<div className="header-stat-value">0</div>
						<div className="header-stat-label">Защищено</div>
					</div>
					<div className="header-stat-divider"></div>
					<div className="header-stat-item">
						<div className="header-stat-value">{convertBytes(filesInfo?.total.size ?? 0)}</div>
						<div className="header-stat-label">Хранилище</div>
					</div>
				</div>
			</div>
		</div>
	)
}