no-copy-frontend/src/app/ui/referral-page/commission-levels.tsx

'use client'

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

export default function CommissionLevels() {
	const {
		data: referralsLevels,
		isLoading,
		isError,
		error
	} = useQuery({
		queryKey: ['referralsLevels'],
		queryFn: () => {
			return fetchReferralsLevels();
		},
		select: (data) => {
			if (data?.message_body) {
				return data?.message_body
			} else {
				return []
			}
		}
	});

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

	if (!referralsLevels?.length) {
		return null;
	}

	return (
		<div className="block-wrapper">
			<h3 className="section-title">
				<span className="icon"></span>
				Уровни комиссии
			</h3>
			<div className="commission-levels">
				<div className="level-card active">
					<div className="level-number">🥉</div>
					<div className="level-commission">15%</div>
					<div className="level-subscribe">BRONZE</div>
					<div className="level-requirement">0-5 рефералов</div>
				</div>
				<div className="level-card ">
					<div className="level-number">🥈</div>
					<div className="level-commission">18%</div>
					<div className="level-subscribe">SILVER</div>
					<div className="level-requirement">6-15 рефералов</div>
				</div>

				<div className="level-card ">
					<div className="level-number">🥇</div>
					<div className="level-commission">22%</div>
					<div className="level-subscribe">GOLD</div>
					<div className="level-requirement">16-50 рефералов</div>
				</div>

				<div className="level-card ">
					<div className="level-number">💎</div>
					<div className="level-commission">25%</div>
					<div className="level-subscribe">PLATINUM</div>
					<div className="level-requirement">50+ рефералов</div>
				</div>
			</div>
		</div>
	)
}