'use client';

import { usePathname, useRouter } from 'next/navigation';

interface NavigationProps {
    currentLang: string;
    t: {
        nav: {
            products: string;
            security: string;
            datacenter: string;
            support: string;
            console: string;
        };
    };
}

export default function Navigation({ currentLang, t }: NavigationProps) {
    const router = useRouter();
    const pathname = usePathname();

    const switchLanguage = (lang: string) => {
        const currentPath = pathname.replace(/^\/[a-z]{2}/, '');
        router.push(`/${lang}${currentPath}`);
    };

    return (
        <nav className="relative z-50 p-6 border-b border-cyan-500/30 backdrop-blur-sm">
            <div className="max-w-7xl mx-auto flex justify-between items-center">
                <div className="text-2xl font-bold text-cyan-400 glitch-text">
                    CYBER
                    <span className="text-pink-500">CLOUD</span>
                </div>

                <div className="hidden md:flex space-x-8">
                    {[
                        { key: 'products', href: '/products' },
                        { key: 'security', href: '/security' },
                        { key: 'datacenter', href: '/datacenter' },
                        { key: 'support', href: '/support' },
                        { key: 'console', href: '/console' },
                    ].map((item) => (
                        <a
                            key={item.key}
                            href={`/${currentLang}${item.href}`}
                            className="hover:text-pink-400 transition-colors duration-300 relative group"
                        >
                            {t.nav[item.key as keyof typeof t.nav]}
                            <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-pink-500 group-hover:w-full transition-all duration-300"></span>
                        </a>
                    ))}
                </div>

                {/* Language Switcher */}
                <div className="flex space-x-2">
                    {[
                        { code: 'zh', label: '简' },
                        { code: 'tw', label: '繁' },
                        { code: 'en', label: 'EN' },
                    ].map((lang) => (
                        <button
                            key={lang.code}
                            onClick={() => switchLanguage(lang.code)}
                            className={`px-3 py-1 text-xs border rounded ${
                                currentLang === lang.code
                                    ? 'border-cyan-400 text-cyan-400'
                                    : 'border-gray-600 text-gray-400 hover:border-cyan-400 hover:text-cyan-400'
                            } transition-colors duration-300`}
                        >
                            {lang.label}
                        </button>
                    ))}
                </div>
            </div>
        </nav>
    );
}