"use client";
import Link from "next/link";
import React from "react";

import { useT } from "@/context/I18nContext";

export default function Nav() {
	const { t } = useT(); 

	return (
		<>
                    <style jsx>{`
               .pulse-link {
                    animation: pulseLink 1.5s infinite ease-in-out;
               }

               @keyframes pulseLink {
                    0% { transform: scale(1); }
                    50% { transform: scale(1.05); }
                    100% { transform: scale(1); }
               }
               `}</style>
		
			<li className="menu-item" style={{ paddingLeft: 71 }}>
				<Link href="/" className="item-link">
					<i
						className="icon icon-home"
						style={{ fontSize: 18 }}
					/>{" "}
					{t('acasa')}
				</Link>
			</li>
               <li className="menu-item">
				<Link href="/toate-produsele" className="item-link">
					<i
						className="icon icon-bag"
						style={{ fontSize: 18 }}
					/>{" "}
					{t('magazin')}
				</Link>
			</li>
               <li className="menu-item">
				<Link href="/reduceri" className="item-link pulse-link" style={{ color: 'red' }}>
					<i
						className="icon icon-energy"
						style={{ fontSize: 18 }}
					/>{" "}
					{t('reduceri')}
				</Link>
			</li>
			<li className="menu-item">
				<Link href="/contact" className="item-link">
					<i
						className="icon icon-mail"
						style={{ fontSize: 16 }}
					></i>{" "}
					Contact
				</Link>
			</li>
		</>
	);
}
