"use client";

import { MobileMenuToggle } from "./MobileMenuToggle";
import { NotificationBell } from "@/components/ui/NotificationBell";
import { SettingsDropdown } from "@/components/ui/SettingsDropdown";
import { Avatar } from "@/components/ui/Avatar";

interface TopBarProps {
  onToggleSidebar: () => void;
}

export function TopBar({ onToggleSidebar }: TopBarProps) {
  return (
    <header className="flex h-14 shrink-0 items-center justify-between border-b border-zinc-200 bg-white px-3 md:px-4 dark:border-zinc-800 dark:bg-zinc-950">
      <div className="flex min-w-0 items-center gap-2">
        <MobileMenuToggle onClick={onToggleSidebar} />
        <h1 className="truncate text-lg font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">
          {process.env.NEXT_PUBLIC_SYSTEM_NAME || "Teletraan"}
        </h1>
      </div>

      <div className="flex shrink-0 items-center gap-1">
        <NotificationBell />
        <SettingsDropdown />
        <div className="ml-1 border-l border-zinc-200 pl-2 md:ml-2 md:pl-3 dark:border-zinc-700">
          <Avatar />
        </div>
      </div>
    </header>
  );
}
