import type { Section } from "../data/portfolio"
import { useSystemTheme } from "../hooks/useSystemTheme"

interface SectionNavProps {
  sections: readonly Section[]
  activeSection: string
}

export function SectionNav({ sections, activeSection }: SectionNavProps) {
  const scrollToSection = (section: string) => {
    document.getElementById(section)?.scrollIntoView({ behavior: "smooth" })
  }

  return (
    <nav className="fixed left-8 top-1/2 -translate-y-1/2 z-10 hidden lg:block">
      <div className="flex flex-col gap-4">
        {sections.map((section) => (
          <button
            key={section}
            onClick={() => scrollToSection(section)}
            className={`w-2 h-8 rounded-full transition-all duration-500 ${
              activeSection === section ? "bg-foreground" : "glass glass-hover"
            }`}
            aria-label={`Navigate to ${section}`}
          />
        ))}
      </div>
    </nav>
  )
}