no-copy-frontend/src/app/ui/settings/subscription-settings.tsx

'use client'

import { useTranslations } from 'next-intl';
import { getUserData } from '@/app/actions/action';
import { useQuery } from '@tanstack/react-query';
import { convertBytes } from '@/app/lib/convertBytes';
import { useUserProfile } from '@/app/hooks/react-query/useUserDataInfo';

export default function SubscriptionSettings() {
	const t = useTranslations('Global');
	const { data: userData, isLoading, isError, error } = useUserProfile();

	function dateHandler(date: string | undefined) {
		if (!date) {
			return 'error'
		}

		const newDate = new Date(date);
		const day = newDate.getDate().toString().padStart(2, '0');
		const month = (newDate.getMonth() + 1).toString().padStart(2, '0');
		const year = newDate.getFullYear();

		return `${day}.${month}.${year}`;
	}

	return (
		<div className="settings-form">
			<div className="form-section">
				<h3 className="form-section-title">
					{t('subscription')}
				</h3>
				<div className="subscription-info">
					<div className="subscription-info-header">
						<div>
							<h4 className="subscription-info-title">Подписка {userData?.tariffInfo?.tariffName}</h4>
							<p>📅 Активна до {dateHandler(userData?.tariffInfo?.endTariff)}</p>
						</div>
						<div style={{ textAlign: "right" }}>
							<div className="subscription-info-title">{userData?.tariffInfo?.maxFileCounts}</div>
							<p>файлов в месяц</p>
						</div>
					</div>
					<div className="subscription-info-main">
						<div className="subscription-info-item">
							<div>💾 Хранилище</div>
							<span>{userData?.tariffInfo?.maxFileOnDisk ? convertBytes(userData?.tariffInfo?.maxFileOnDisk) : 0}</span>
						</div>
						<div className="subscription-info-item">
							<div>🔌 API доступ</div>
							<span>Включен</span>
						</div>
						<div className="subscription-info-item">
							<div>🎧 Поддержка</div>
							<span>24/7</span>
						</div>
					</div>
				</div>

				{/* <div className="subscription-info-footer">
					<button className="btn btn-outline">
						🚀 СТАРТ
					</button>
					<button className="btn btn-outline">
						⭐ ПРЕМИУМ
					</button>
					<button className="btn btn-outline">
						💼 ПРОФИ
					</button>
				</div> */}
			</div>
		</div>
	)
}