'use client'
import { Search, Plus } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { NotificationBell } from './NotificationBell'

const PAGE_TITLES: Record<string, string> = {
  '/dashboard': 'Dashboard',
  '/operaciones': 'Operaciones',
  '/kanban': 'Tablero Kanban',
  '/propiedades': 'Propiedades',
  '/clientes': 'Clientes',
  '/configuracion': 'Configuración',
}

export function Topbar() {
  const pathname = usePathname()
  const title = Object.entries(PAGE_TITLES).find(([k]) => pathname.startsWith(k))?.[1] ?? 'InmoGestión'

  return (
    <header className="h-16 border-b border-border bg-card flex items-center px-6 gap-4 flex-shrink-0">
      <h1 className="text-xl font-semibold text-foreground">{title}</h1>

      <div className="relative ml-auto w-72 hidden md:block">
        <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
        <Input placeholder="Buscar operaciones..." className="pl-9 h-9 text-sm" />
      </div>

      <NotificationBell />

      <Link href="/operaciones/nueva">
        <Button size="sm" className="gap-2">
          <Plus size={16} />
          <span className="hidden sm:inline">Nueva Operación</span>
        </Button>
      </Link>
    </header>
  )
}