'use client';

import { useState } from 'react';
import { useTranslations, useLocale } from 'next-intl';
import Link from 'next/link';
import { Menu, X } from 'lucide-react';
import LanguageSwitcher from '../common/LanguageSwitcher';
import styles from './Navbar.module.css';

export default function Navbar() {
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const locale = useLocale();
    const tHome = useTranslations('HomePage');
    const tDocs = useTranslations('Docs');

    const toggleMenu = () => {
        setIsMenuOpen(!isMenuOpen);
    };

    const closeMenu = () => {
        setIsMenuOpen(false);
    };

    return (
        <nav className={styles.navbar}>
            <div className={styles.navbarContainer}>
                <Link href={`/${locale}`} className={styles.logo} onClick={closeMenu}>QUAROS</Link>
                <button
                    className={styles.menuButton}
                    onClick={toggleMenu}
                    aria-label="Toggle menu"
                    aria-expanded={isMenuOpen}
                >
                    {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
                </button>
                {isMenuOpen && (
                    <div className={styles.overlay} onClick={closeMenu} />
                )}
                <div className={`${styles.navLinks} ${isMenuOpen ? styles.navLinksOpen : ''}`}>
                    <div className={styles.mobileMenuHeader}>
                        <div className={styles.mobileMenuTitle}>Menu</div>
                        <button
                            className={styles.closeMenuButton}
                            onClick={closeMenu}
                            aria-label="Close menu"
                        >
                            <X size={20} />
                        </button>
                    </div>
                    <Link href="/" className={styles.link} onClick={closeMenu}>{tHome('learnMore')}</Link>
                    <Link href="/docs" className={styles.link} onClick={closeMenu}>{tDocs('title')}</Link>
                    <LanguageSwitcher />
                </div>
            </div>
        </nav>
    );
}

