"use client"

import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import type { Sections, translations } from "@/i18n/translations"
import { Menu } from "lucide-react"
import ScrollSpy from "react-scrollspy-navigation"
import { LanguageSelector } from "./ui/language-selector"

function NavContent({
  t,
  linksOrder,
  externalLinks
}: {
  t: typeof translations.pl,
  linksOrder: Array<Sections>,
  externalLinks: Record<string, string>
}) {
  return (
    <nav className="flex flex-col gap-4 mt-8">
      <ScrollSpy activeClass="nav-active" offsetTop={80}>

        {linksOrder.map((value) => {
          const isExternal = value in externalLinks;
          const href = isExternal ? externalLinks[value] : `#${value}`;
          
          return (
            <a 
              key={value} 
              href={href} 
              {...(isExternal ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
              className="text-lg hover:text-primary transition-colors"
            >
              {t.nav[value]}
            </a>
          );
        })}
      </ScrollSpy>
      <LanguageSelector />
    </nav>
  )
}

export function MobileNav({
  t,
  linksOrder,
  externalLinks,
}: {
  t: typeof translations.pl
  linksOrder: Array<Sections>
  externalLinks: Record<string, string>
}) {
  return (
    <Sheet >
      <SheetTrigger asChild>
        <Button variant="ghost" size="icon" className="md:hidden">
          <Menu className="h-5 w-5" />
          <span className="sr-only">{t.mobileNav.toggleMenu}</span>
        </Button>
      </SheetTrigger>
      <SheetContent side="right" className="w-[80vw] sm:w-[385px] z-max">
        <SheetHeader>
          <SheetTitle>{t.mobileNav.menu}</SheetTitle>
        </SheetHeader>
        <NavContent t={t} linksOrder={linksOrder} externalLinks={externalLinks} />
      </SheetContent>
    </Sheet>
  )
}

