'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';

export default function MyContentPageTitleColorFrame({ title, description }: { title: string, description: string }) {
	const t = useTranslations('Global');
	const {
		data: filesInfo,
		isLoading,
		isError,
		error,
	} = useQuery({
		queryKey: ['userFilesInfo'],
		queryFn: getUserFilesInfo,
	});

	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?.all_files_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">{filesInfo.all_files_size ? convertBytes(filesInfo.all_files_size) : 0}</div>
						<div className="header-stat-label">Хранилище</div>
					</div>
				</div>
			</div>
		</div>
	)
}