import './TopBar.css';

function TopBar({ title, showBack, onBack, rightAction }) {
  return (
    <header className="top-bar">
      <div className="topbar-inner">
        {showBack ? (
          <button className="topbar-back" onClick={onBack} aria-label="Volver">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M19 12H5" />
              <polyline points="12 19 5 12 12 5" />
            </svg>
          </button>
        ) : (
          <div className="topbar-spacer" />
        )}
        {showBack ? (
          <h1 className="topbar-title">{title}</h1>
        ) : (
          <img src="/logo.png" alt="FarmaClic" className="topbar-logo-img" />
        )}
        <div className="topbar-right">{rightAction || <div className="topbar-spacer" />}</div>
      </div>
    </header>
  );
}

export default TopBar;