import { Metadata } from 'next';
import UserUsage from '@/app/ui/payment/user-usage';
import TokensSpendStats from '@/app/ui/payment/tokens-spend-stats';
import PaymentTabs from '@/app/ui/payment/payment-tabs';
import SecurePayments from '@/app/ui/payment/secure-payments';

export const metadata: Metadata = {
	title: 'payment',
};

export default function Page() {
	return (
		<div>
			<main>
				<div className="payment-container">
					<div>
						<h1 className="page-title">💳 Управление подпиской и токенами</h1>
						<p>
							Выберите подходящий тарифный план или пополните баланс токенов для защиты файлов
						</p>
					</div>
					<UserUsage />
					<TokensSpendStats />
					<PaymentTabs />
					<SecurePayments />
				</div>
			</main>
		</div>
	);
}