"use client"

import { Input } from "@/components/ui/input"
import { Search } from "lucide-react"
import Image from "next/image"
import { useTheme } from "next-themes"
import { useEffect, useState } from "react"
import { ThemeToggle } from "@/components/theme-toggle"

export function Navigation() {
  const { theme, systemTheme } = useTheme()
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return null
  }

  const currentTheme = theme === "system" ? systemTheme : theme
  const logoSrc = currentTheme === "dark" ? "/logo-white.svg" : "/logo-black.svg"

  return (
    <nav className="border-b border-border bg-card">
      <div className="flex items-center justify-between px-6 py-4">
        <div className="flex items-center space-x-8">
          <div className="flex items-center space-x-3">
            <div className="flex items-center justify-center">
              <Image
                src={logoSrc || "/placeholder.svg"}
                alt="Sapiens Logo"
                width={130}
                height={36}
                className="w-32 h-9"
              />
            </div>
            <span className="font-semibold text-lg">Finance</span>
          </div>
        </div>
        <div className="flex items-center space-x-4">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
            <Input placeholder="Search stocks..." className="pl-10 w-64 bg-input border-border" />
          </div>
          <ThemeToggle />
        </div>
      </div>
    </nav>
  )
}