'use client'

import NotificationsButton from './notificationsButton';
import UserMenuButton from './userMenuButton';
import Link from 'next/link';
import LanguageSwitcher from '@/app/components/LanguageSwitcher';
import { useTranslations } from 'next-intl';
import BurgerMenu from '@/app/ui/navigation/burger-menu';
import { getUserData } from '@/app/actions/action';
import { useQuery } from '@tanstack/react-query';

export default function HeaderPanel() {
	const t = useTranslations("Global");
	const {
		data: tokens,
		isLoading,
		isError,
		error
	} = useQuery({
		queryKey: ['userData'],
		queryFn: () => {
			return getUserData();
		},
		select: (data) => {
			if (typeof data?.tariffInfo?.tokens === 'number') {
				return data?.tariffInfo?.tokens
			} else {
				return null;
			}

		}
	});

	return (
		<header className="header">
			<BurgerMenu />
			<div className="header-action">
				{/* <LanguageSwitcher /> */}
				{tokens && (
					<Link
						href={'/pages/payment'}
						className="tokens-balance"
					>
						<div className="tokens-wrapper" title={t('current-balance-of-protection')}>
							<svg viewBox="0 0 24 24" fill="currentColor" style={{ width: "16px", height: "16px" }}>
								<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"></path>
							</svg>
							<span className="tokens-count">{tokens}</span>
							<span className="tokens-label">
								{t('tokens')}
							</span>
						</div>
					</Link>
				)}
				<NotificationsButton />
				<UserMenuButton />
			</div>
		</header>
	)
}