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

import { useTranslations } from 'next-intl';

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

	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">🎯 Подписка "ПРОФИ"</h4>
							<p>📅 Активна до 10.06.2028</p>
						</div>
						<div style={{ textAlign: "right" }}>
							<div className="subscription-info-title">2,000</div>
							<p>файлов в месяц</p>
						</div>
					</div>
					<div className="subscription-info-main">
						<div className="subscription-info-item">
							<div>💾 Хранилище</div>
							<span>20 ГБ</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>
	)
}