import NotificationBell from "./NotificationBell";

function TopBar({ onAddClick, user, onLogout, onShowToast, onNotificationClick, onAdminClick }) {
  return (
    <header className="topbar">
      <div className="topbar-left">
        <span className="logo-emoji" role="img" aria-label="plate">
          🍽
        </span>
        <div className="brand">
          <div className="brand-title">מה לבשל היום?</div>
          <div className="brand-subtitle">מנהל המתכונים האישי שלך</div>
        </div>
      </div>

      <div className="topbar-actions">
        {user && <NotificationBell onShowToast={onShowToast} onNotificationClick={onNotificationClick} />}
        {user?.is_admin && (
          <button className="btn ghost btn-mobile-compact" onClick={onAdminClick}>
            <span className="btn-text-desktop">🛡️ ניהול</span>
            <span className="btn-text-mobile">🛡️</span>
          </button>
        )}
        {user && (
          <button className="btn primary btn-mobile-compact" onClick={onAddClick}>
            <span className="btn-text-desktop">+ מתכון חדש</span>
            <span className="btn-text-mobile">+</span>
          </button>
        )}
        {onLogout && (
          <button className="btn ghost btn-mobile-compact" onClick={onLogout}>
            <span className="btn-text-desktop">יציאה</span>
            <span className="btn-text-mobile">↩️</span>
          </button>
        )}
      </div>
    </header>
  );
}

export default TopBar;