import React from "react";
import "./topbar.css";

export default function TopBar({ username, theme, setTheme, onLoginClick, onSignupClick }) {
  return (
    <div className="topbar">
      
      <div className="topbar-left">
        <img
          src="/icons/logo-master.png"
          alt="SocioWire Logo"
          className="sw-logo"
        />

        <div className="title-block">
          <div className="main-title">SocioWire</div>
          <div className="sub-title">Wired to life</div>
        </div>
      </div>

      <div className="topbar-right">
        <div className="theme-switch">
          <button className={\`theme-dot \${theme === "dark" ? "theme-dot-active" : ""}\`} onClick={() => setTheme("dark")}>D</button>
          <button className={\`theme-dot \${theme === "blue" ? "theme-dot-active" : ""}\`} onClick={() => setTheme("blue")}>B</button>
          <button className={\`theme-dot \${theme === "light" ? "theme-dot-active" : ""}\`} onClick={() => setTheme("light")}>L</button>
        </div>

        {username ? (
          <div className="username-chip">{username}</div>
        ) : (
          <>
            <button className="btn-primary" onClick={onLoginClick}>Login</button>
            <button className="btn-secondary" onClick={onSignupClick}>Sign up</button>
          </>
        )}
      </div>
    </div>
  );
}