"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { Activity, LayoutDashboard, Home } from "lucide-react"

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

    return (
        <nav className="w-full border-b border-slate-800 bg-slate-950/50 backdrop-blur-sm sticky top-0 z-50">
            <div className="container mx-auto px-4 h-16 flex items-center justify-between">
                <div className="flex items-center gap-2">
                    <div className="h-8 w-8 rounded-full bg-cyan-500/10 flex items-center justify-center border border-cyan-500/20">
                        <Activity className="h-5 w-5 text-cyan-500" />
                    </div>
                    <span className="font-bold text-xl bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
                        SepsisGuard
                    </span>
                </div>

                <div className="flex items-center gap-6">
                    <Link
                        href="/"
                        className={`flex items-center gap-2 text-sm font-medium transition-colors hover:text-cyan-400 ${pathname === "/" ? "text-cyan-400" : "text-slate-400"
                            }`}
                    >
                        <Home className="h-4 w-4" />
                        Patient Monitor
                    </Link>
                    <Link
                        href="/dashboard"
                        className={`flex items-center gap-2 text-sm font-medium transition-colors hover:text-cyan-400 ${pathname === "/dashboard" ? "text-cyan-400" : "text-slate-400"
                            }`}
                    >
                        <LayoutDashboard className="h-4 w-4" />
                        Hospital Overview
                    </Link>
                </div>
            </div>
        </nav>
    )
}