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}
        aria-label="Back to grocery list"
      >
        <span aria-hidden="true">&larr;</span>
      </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>
  );
}