// frontend/src/components/AppHeader.jsx
import React from "react";
import dojoLogo from "../assets/dojo-logo.png"; // bundled via Vite

export default function AppHeader({ title, subtitle, right }) {
  return (
    <header className="border-b border-slate-200 bg-white/80 backdrop-blur">
      <div className="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between gap-4">
        <div className="flex items-center gap-3 min-w-0">
          <img
            src={dojoLogo}
            alt="Dojo logo"
            className="h-8 w-8 rounded-full border border-slate-200 bg-white object-cover"
          />
          <div className="min-w-0">
            {/* Title - now full black */}
            <div className="text-sm font-semibold tracking-tight text-black truncate">
              {title}
            </div>

            {/* Subtitle - now darker than before */}
            {subtitle && (
              <div className="text-xs text-slate-600 truncate">
                {subtitle}
              </div>
            )}
          </div>
        </div>

        {right && (
          <div className="flex items-center gap-3 shrink-0">
            {right}
          </div>
        )}
      </div>
    </header>
  );
}