CloudProxy/components/Navigation.tsx

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useState } from 'react';
import LanguageSwitcher from './LanguageSwitcher';

interface NavigationProps {
    t: {
        nav: {
            home: string;
            products: string;
            pricing: string;
            support: string;
            contact: string;
        };
    };
    currentLang: string;
    onLanguageChange: (lang: string) => void;
    isLoaded: boolean;
}

export default function Navigation({
    t,
    currentLang,
    onLanguageChange,
    isLoaded,
}: NavigationProps) {
    const pathname = usePathname();
    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

    // Navigation items with their corresponding paths
    const navItems = [
        { key: 'home', label: t.nav.home, path: `/${currentLang}` },
        { key: 'products', label: t.nav.products, path: `/${currentLang}/products` },
        { key: 'pricing', label: t.nav.pricing, path: `/${currentLang}/pricing` },
        { key: 'support', label: t.nav.support, path: `/${currentLang}/support` },
        { key: 'contact', label: t.nav.contact, path: `/${currentLang}/contact` },
    ];

    // Function to check if current path is active
    const isActivePath = (path: string) => {
        if (path === `/${currentLang}`) {
            return pathname === path;
        }
        return pathname.startsWith(path);
    };
    return (
        <nav
            className={`relative z-50 p-6 transition-all duration-1000 ${
                isLoaded ? 'translate-y-0 opacity-100' : '-translate-y-10 opacity-0'
            }`}
            data-oid="ftbrpan"
        >
            <div className="max-w-7xl mx-auto flex justify-between items-center" data-oid="zb6yn.c">
                <div className="flex items-center space-x-8" data-oid="ka3y84h">
                    <Link
                        href={`/${currentLang}`}
                        className="text-2xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent hover:from-purple-300 hover:to-pink-300 transition-all duration-300"
                        data-oid="loqzo1u"
                    >
                        CloudProxy
                    </Link>
                    <div className="hidden md:flex space-x-6" data-oid="me-v.20">
                        {navItems.map((item, index) => (
                            <Link
                                key={index}
                                href={item.path}
                                className={`transition-colors duration-300 relative group ${
                                    isActivePath(item.path)
                                        ? 'text-white'
                                        : 'text-gray-300 hover:text-white'
                                }`}
                                data-oid="p9vqa5r"
                            >
                                {item.label}
                                <span
                                    className={`absolute -bottom-1 left-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-400 transition-all duration-300 ${
                                        isActivePath(item.path)
                                            ? 'w-full'
                                            : 'w-0 group-hover:w-full'
                                    }`}
                                    data-oid="-hrge4b"
                                ></span>
                            </Link>
                        ))}
                    </div>
                </div>

                <div className="flex items-center space-x-4" data-oid="yigvy5u">
                    {/* Mobile menu button */}
                    <button
                        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
                        className="md:hidden text-gray-300 hover:text-white transition-colors duration-300"
                        data-oid="fjs:q-."
                    >
                        <svg
                            className="w-6 h-6"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                            data-oid="6.n8kvn"
                        >
                            {isMobileMenuOpen ? (
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth={2}
                                    d="M6 18L18 6M6 6l12 12"
                                    data-oid="njer3hr"
                                />
                            ) : (
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth={2}
                                    d="M4 6h16M4 12h16M4 18h16"
                                    data-oid="o3gso5o"
                                />
                            )}
                        </svg>
                    </button>

                    {/* Language Selector */}
                    <LanguageSwitcher
                        currentLang={currentLang}
                        onLanguageChange={onLanguageChange}
                        data-oid="pn7kv.4"
                    />
                </div>
            </div>

            {/* Mobile Navigation Menu */}
            {isMobileMenuOpen && (
                <div
                    className="md:hidden absolute top-full left-0 right-0 bg-gray-800/95 backdrop-blur-md border-t border-gray-700 z-40"
                    data-oid="h98vme6"
                >
                    <div className="px-6 py-4 space-y-4" data-oid="8u7hst-">
                        {navItems.map((item, index) => (
                            <Link
                                key={index}
                                href={item.path}
                                onClick={() => setIsMobileMenuOpen(false)}
                                className={`block py-2 transition-colors duration-300 ${
                                    isActivePath(item.path)
                                        ? 'text-purple-400'
                                        : 'text-gray-300 hover:text-white'
                                }`}
                                data-oid="mtlwvvb"
                            >
                                {item.label}
                            </Link>
                        ))}
                    </div>
                </div>
            )}
        </nav>
    );
}