'use client';
import { Circle } from 'lucide-react';
import NotificationBell from './NotificationBell';

export default function Topbar({ title, subtitle, right, onlineCount = 0 }) {
  return (
    <header className="h-16 shrink-0 flex items-center gap-4 px-6
                       bg-white border-b border-ink-200">
      <div className="min-w-0">
        <h1 className="text-[15px] font-bold text-ink-900 tracking-tight truncate">
          {title}
        </h1>
        {subtitle && (
          <p className="text-[12px] text-ink-500 truncate mt-0.5">{subtitle}</p>
        )}
      </div>

      <div className="ml-auto flex items-center gap-3">
        {onlineCount > 0 && (
          <span className="chip bg-emerald-50 text-emerald-700 border border-emerald-200">
            <Circle size={7} className="fill-emerald-500 text-emerald-500" />
            {onlineCount} online
          </span>
        )}

        <NotificationBell />

        {right}
      </div>
    </header>
  );
}