import NotificationsButton from './notificationsButton';
import UserMenuButton from './userMenuButton';
import Link from 'next/link';
import LanguageSwitcher from '@/app/components/LanguageSwitcher';
import { useTranslations } from 'next-intl';

export default function HeaderPanel() {
	const t = useTranslations("Global");

	return (
		<header className="header">
			<div className="header-action">
				<LanguageSwitcher />
				<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">800</span>
						<span className="tokens-label">
							{t('tokens')}
						</span>
					</div>
				</Link>
				<NotificationsButton />
				<UserMenuButton />
			</div>
		</header>
	)
}