import { getLocationName, getStoreName } from "../../lib/locationMapUtils";

export default function LocationMapTopbar({ location, status, onBack }) {
  const statusClass = status.toLowerCase().replace(/\s+/g, "-");

  return (
    <header className="location-map-topbar">
      <button type="button" className="location-map-back" onClick={onBack}>
        Back
      </button>
      <div className="location-map-title">
        <h1>{getStoreName(location)}</h1>
        <span>{getLocationName(location)}</span>
      </div>
      <span className={`location-map-status location-map-status-${statusClass}`}>
        {status}
      </span>
    </header>
  );
}
