import { Link } from 'react-router-dom';
import { Search, Bell, HelpCircle, Lock } from 'lucide-react';

export default function TopBar({ route = '/', onLock }) {
  return (
    <header className="flex h-12 shrink-0 items-center gap-3 border-b border-white/10 bg-[#0d1318] px-4">
      <Link to="/" className="flex items-center gap-2">
        <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-cyan-400/15 text-sm font-black tracking-tight text-cyan-300">S</span>
        <div className="leading-none">
          <span className="block text-sm font-bold tracking-[0.12em] text-white">SHiRE LimbForge</span>
          <span className="block text-[10px] font-medium uppercase tracking-[0.2em] text-cyan-400/80">Workshop</span>
        </div>
      </Link>

      <div className="mx-2 hidden h-6 w-px bg-white/10 sm:block" />

      <div className="hidden items-center gap-1.5 font-mono text-xs text-slate-400 sm:flex">
        <span className="text-slate-600">/</span>
        <span className="text-slate-300">{route}</span>
      </div>

      <div className="ml-auto flex items-center gap-2">
        <div className="relative hidden md:block">
          <Search className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
          <input
            placeholder="Search customers, projects…"
            className="h-9 w-56 rounded-xl border border-white/10 bg-black/20 pl-8 pr-3 text-sm text-slate-200 placeholder:text-slate-600 focus:border-cyan-400/50 focus:outline-none"
          />
        </div>
        <button className="icon-btn relative" title="Notifications"><Bell className="h-4 w-4" /><span className="absolute right-1.5 top-1.5 h-1.5 w-1.5 rounded-full bg-cyan-400" /></button>
        <button className="icon-btn" title="Help"><HelpCircle className="h-4 w-4" /></button>
        <button onClick={onLock} className="icon-btn" title="Lock workshop"><Lock className="h-4 w-4" /></button>
        <div className="flex h-9 w-9 items-center justify-center rounded-full bg-cyan-400/20 text-xs font-bold text-cyan-200" title="Workshop owner">AA</div>
      </div>
    </header>
  );
}