'use client';

import Link from "next/link";

interface HeaderProps {
    currentLang: string;
    setCurrentLang: (lang: string) => void;
    currentPage?: string;
    navContent: {
        home: string;
        docs: string;
        about: string;
        contact: string;
    };
}

export function Header({ currentLang, setCurrentLang, currentPage = '', navContent }: HeaderProps) {
    const getNavLinkClass = (page: string) => {
        return currentPage === page
            ? 'text-blue-600 px-3 py-2 text-sm font-medium border-b-2 border-blue-600'
            : 'text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium';
    };

    return (
        <header className="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex justify-between items-center h-16">
                    <div className="flex items-center">
                        <div className="flex-shrink-0">
                            <div className="h-8 w-8 bg-blue-600 rounded-lg flex items-center justify-center">
                                <span className="text-white font-bold text-sm">MS</span>
                            </div>
                        </div>
                        <div className="ml-4">
                            <span className="text-xl font-semibold text-gray-900">MultiSite</span>
                        </div>
                    </div>

                    <nav className="hidden md:flex space-x-8">
                        <Link href="/" className={getNavLinkClass('home')}>
                            {navContent.home}
                        </Link>
                        <Link href="/docs" className={getNavLinkClass('docs')}>
                            {navContent.docs}
                        </Link>
                        <Link href="/about" className={getNavLinkClass('about')}>
                            {navContent.about}
                        </Link>
                        <Link href="/contact" className={getNavLinkClass('contact')}>
                            {navContent.contact}
                        </Link>
                    </nav>

                    <div className="flex items-center space-x-4">
                        <select
                            value={currentLang}
                            onChange={(e) => setCurrentLang(e.target.value)}
                            className="appearance-none bg-white border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        >
                            <option value="zh-CN">简体中文</option>
                            <option value="zh-TW">繁體中文</option>
                            <option value="en">English</option>
                        </select>
                    </div>
                </div>
            </div>
        </header>
    );
}