no-copy-frontend/src/app/ui/payment/payment-tab-tariffs.tsx

'use client'

import { useEffect } from 'react';
import { getUserData } from '@/app/actions/action';
import { useQuery } from '@tanstack/react-query';

export default function PaymentTabTariffs() {
	const {
		data: userData,
		isLoading,
		isError,
		error
	} = useQuery({
		queryKey: ['userData'],
		queryFn: () => {
			return getUserData();
		}
	});

	useEffect(() => {
		console.log('show => userData');
		console.log(userData);
	}, [])

	return (
		<div className="tab-content">
			<div className="billing-toggle">
				<div>
					<button className="billing-btn active">💳 Помесячно</button>
					<button className="billing-btn">
						🔥 Годовая
						<span>ВЫГОДНО</span>
					</button>
				</div>
			</div>
			<div className="subscription-grid">
				<div className="plan-card animate-card">
					<div className="plan-header">
						<div className="plan-icon">🚀</div>
						<h3 className="plan-name">СТАРТ</h3>
						<div className="plan-price">900₽</div>
						<div className="plan-period">в месяц</div>
						<div className="plan-tokens">100 токенов включено</div>
					</div>
					<ul className="plan-features">
						<li className="plan-feature">
							<span className="feature-icon">✓</span>
							100 файлов в месяц
						</li>
						<li className="plan-feature">
							<span className="feature-icon">✓</span>
							1 ГБ хранилища
						</li>
						<li className="plan-feature">
							<span className="feature-icon">✓</span>
							До 10 МБ на файл
						</li>
						<li className="plan-feature">
							<span className="feature-icon">✓</span>
							Базовые модули защиты
						</li>
						<li className="plan-feature">
							<span className="feature-icon">✓</span>
							Поддержка 24/7
						</li>
						<li className="plan-feature">
							<span className="feature-icon not">✗</span>
							API доступ
						</li>
					</ul>
				</div>
				<div className="plan-card animate-card">
					<div className="plan-header">
						<div className="plan-icon">🚀</div>
						<h3 className="plan-name">ПРЕМИУМ</h3>
						<div className="plan-price">3500₽</div>
						<div className="plan-period">в месяц</div>
						<div className="plan-tokens">100 токенов включено</div>
					</div>
					<ul className="plan-features">
						<li className="plan-feature">
							<span className="feature-icon">✓</span>
							100 файлов в месяц
						</li>
						<li className="plan-feature">
							<span className="feature-icon">✓</span>
							1 ГБ хранилища
						</li>
						<li className="plan-feature">
							<span className="feature-icon">✓</span>
							До 10 МБ на файл
						</li>
						<li className="plan-feature">
							<span className="feature-icon">✓</span>
							Базовые модули защиты
						</li>
						<li className="plan-feature">
							<span className="feature-icon">✓</span>
							Поддержка 24/7
						</li>
						<li className="plan-feature">
							<span className="feature-icon not">✗</span>
							API доступ
						</li>
					</ul>
				</div>
				<div className="plan-card animate-card">
					<div className="plan-header">
						<div className="plan-icon">🚀</div>
						<h3 className="plan-name">ПРОФИ</h3>
						<div className="plan-price">9500₽</div>
						<div className="plan-period">в месяц</div>
						<div className="plan-tokens">100 токенов включено</div>
					</div>
					<ul className="plan-features">
						<li className="plan-feature">
							<span className="feature-icon">✓</span>
							100 файлов в месяц
						</li>
						<li className="plan-feature">
							<span className="feature-icon">✓</span>
							1 ГБ хранилища
						</li>
						<li className="plan-feature">
							<span className="feature-icon">✓</span>
							До 10 МБ на файл
						</li>
						<li className="plan-feature">
							<span className="feature-icon">✓</span>
							Базовые модули защиты
						</li>
						<li className="plan-feature">
							<span className="feature-icon">✓</span>
							Поддержка 24/7
						</li>
						<li className="plan-feature">
							<span className="feature-icon not">✗</span>
							API доступ
						</li>
					</ul>
				</div>
			</div>
		</div>
	)
}