import { ArrowLeft } from "lucide-react";

function IconBtn({ icon: LucideIcon, label, onClick, size = 36 }) {
  return (
    <button
      type="button"
      aria-label={label}
      onClick={onClick}
      className="flex-shrink-0 rounded-md bg-transparent border-0 text-fg-secondary cursor-pointer inline-flex items-center justify-center transition-colors duration-fast ease-out-expo hover:bg-hover hover:text-fg"
      style={{ width: size, height: size }}
    >
      <LucideIcon size={Math.floor(size * 0.5)} strokeWidth={1.75} />
    </button>
  );
}

function ChatHeader({ participantName, onBack }) {
  return (
    <header
      className="relative z-[5] h-14 flex items-center gap-1 px-2 border-b border-line backdrop-blur-md"
      style={{ background: "rgba(10,10,11,0.85)" }}
    >
      <IconBtn icon={ArrowLeft} label="Back to conversations" onClick={onBack} />
      <div className="flex items-center gap-2.5 flex-1 min-w-0 px-1 py-1">
        <Avatar name={participantName} size={34} />
        <div className="flex-1 min-w-0">
          <div className="text-fg text-sm font-semibold tracking-[-0.01em] truncate">
            {participantName}
          </div>
          <div className="text-[11px] font-mono tracking-[-0.01em] text-fg-tertiary">Online</div>
        </div>
      </div>
    </header>
  );
}

window.ChatHeader = ChatHeader;