"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { Sparkles } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

export function Navigation() {
  const pathname = usePathname()

  const links = [
    { href: "/about", label: "About Banksy" },
    { href: "/gallery", label: "Gallery" },
    { href: "/sponsor", label: "Sponsor My Art" },
  ]

  return (
    <nav className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-16 items-center justify-between px-4">
        <Link href="/" className="flex items-center gap-2 font-bold text-xl">
          <Sparkles className="h-6 w-6 text-primary" />
          <div className="flex flex-col leading-tight">
            <span className="rainbow-text">Paint Spark</span>
            <span className="text-xs font-normal text-muted-foreground">by Banksy</span>
          </div>
        </Link>

        <div className="flex items-center gap-6">
          {links.map((link) => {
            if (link.href === "/sponsor") {
              return (
                <Button key={link.href} asChild className="rainbow-button text-white font-bold border-0">
                  <Link href={link.href}>{link.label}</Link>
                </Button>
              )
            }

            return (
              <Link
                key={link.href}
                href={link.href}
                className={cn(
                  "text-sm font-bold transition-colors hover:text-primary",
                  pathname === link.href
                    ? "text-primary"
                    : link.href === "/about"
                      ? "text-teal-600 dark:text-teal-400"
                      : "text-purple-600 dark:text-purple-400",
                )}
              >
                {link.label}
              </Link>
            )
          })}
        </div>
      </div>
    </nav>
  )
}