'use client';

import * as React from 'react';
import { Bell, Menu, Search } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';

interface TopbarProps {
  breadcrumb: React.ReactNode;
  /** Logo compacta (só símbolo) exibida no lugar do breadcrumb no mobile. */
  mobileBrand: React.ReactNode;
  onMenuClick: () => void;
}

/**
 * Topbar fixa no topo. Desktop: breadcrumb + busca rápida + notificações.
 * Mobile (`<md`): logo símbolo + hambúrguer (abre o `Drawer`) + notificações
 * — a busca funcional real fica para a Etapa 18/19, aqui só o componente.
 */
export function Topbar({ breadcrumb, mobileBrand, onMenuClick }: TopbarProps) {
  return (
    <header className="sticky top-0 z-20 flex h-16 items-center gap-3 border-b border-border bg-surface px-4 md:px-6">
      <Button
        type="button"
        variant="ghost"
        size="icon-sm"
        className="md:hidden"
        onClick={onMenuClick}
        aria-label="Abrir menu"
      >
        <Menu className="size-5" />
      </Button>

      <div className="flex min-w-0 flex-1 items-center gap-3">
        <div className="md:hidden">{mobileBrand}</div>
        <div className="hidden min-w-0 md:block">{breadcrumb}</div>
      </div>

      <div className="hidden max-w-xs flex-1 items-center md:flex">
        <div className="relative w-full">
          <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-neutral-500" />
          <Input placeholder="Buscar clientes, vendas..." className="pl-9" aria-label="Busca rápida" />
        </div>
      </div>

      <Button type="button" variant="ghost" size="icon-sm" aria-label="Notificações">
        <Bell className="size-5" />
      </Button>
    </header>
  );
}