"use client"

import { useState } from "react"
import { Menu, X, Camera } from "lucide-react"
import { Button } from "@/components/ui/button"

interface NavigationProps {
  activeTab: string
  onTabChange: (tab: string) => void
}

export function Navigation({ activeTab, onTabChange }: NavigationProps) {
  const [isMenuOpen, setIsMenuOpen] = useState(false)

  const navItems = [
    { id: "gallery", name: "作品集", href: "#gallery" },
    { id: "categories", name: "分类", href: "#categories" },
    { id: "tags", name: "标签", href: "#tags" },
    { id: "timeline", name: "时间线", href: "#timeline" },
    { id: "about", name: "关于我", href: "#about" },
    { id: "contact", name: "联系", href: "#contact" },
  ]

  const handleTabClick = (item: { id: string; name: string; href: string }) => {
    // Handle all tabs, not just gallery and timeline
    onTabChange(item.id)
    setIsMenuOpen(false)
  }

  return (
    <nav className="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100">
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <div className="flex items-center space-x-2">
            <Camera className="h-8 w-8 text-gray-900" />
            <span className="text-xl font-light text-gray-900">PhotoStudio</span>
          </div>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center space-x-8">
            {navItems.map((item) => (
              <button
                key={item.name}
                onClick={() => handleTabClick(item)}
                className={`text-gray-700 hover:text-gray-900 transition-colors duration-200 font-light relative pb-1 min-h-[44px] px-2 ${
                  activeTab === item.id ? "text-gray-900" : ""
                }`}
              >
                {item.name}
                {activeTab === item.id && (
                  <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-gray-900 rounded-full" />
                )}
              </button>
            ))}
          </div>

          {/* Mobile Menu Button */}
          <Button 
            variant="ghost" 
            size="sm" 
            className="md:hidden min-h-[44px] min-w-[44px] p-2" 
            onClick={() => setIsMenuOpen(!isMenuOpen)}
          >
            {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
          </Button>
        </div>

        {/* Mobile Navigation */}
        {isMenuOpen && (
          <div className="md:hidden py-4 border-t border-gray-100">
            <div className="flex flex-col space-y-2">
              {navItems.map((item) => (
                <button
                  key={item.name}
                  onClick={() => handleTabClick(item)}
                  className={`text-left text-gray-700 hover:text-gray-900 transition-colors duration-200 font-light min-h-[44px] px-4 py-2 rounded-md hover:bg-gray-50 ${
                    activeTab === item.id ? "text-gray-900 font-medium bg-gray-50" : ""
                  }`}
                >
                  {item.name}
                </button>
              ))}
            </div>
          </div>
        )}
      </div>
    </nav>
  )
}
// test change