'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 { useUserProfile } from '@/app/hooks/react-query/useUserDataInfo';

export default function HeaderPanel() {
	const t = useTranslations("Global");
	const { data: userData, isLoading, isError, error } = useUserProfile();
	return (
		<header className="header">
			<BurgerMenu />
			<div className="header-action">
				{/* <LanguageSwitcher /> */}
				{typeof userData?.tariffInfo.tokens === 'number' && (
					<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">{userData?.tariffInfo.tokens}</span>
							<span className="tokens-label">
								{t('tokens')}
							</span>
						</div>
					</Link>
				)}
				<NotificationsButton />
				<UserMenuButton />
			</div>
		</header>
	)
}