import { r as s, h as i } from "./reactcomponent-44b70bf6.mjs";
import { R as t } from "./route-travel-mode.enum-7f4ce9c7-a9c95a83.mjs";
import { U as n } from "./unit-system.enum-eaefb53e-0f424da4.mjs";
import "react";
import "react-dom";
const a = '.directions{border-bottom:1px solid #d1d5db;color:#1c1917;font-size:1rem;font-weight:400;font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"}.directions-way-points{padding-top:24px;padding-bottom:24px;padding-left:16px;padding-right:16px;border-bottom:1px solid #f3f4f6}.directions-way-points span{display:block}.directions-way-points span:first-child{font-size:1.25rem;font-weight:500;line-height:1.5rem}.directions-way-points span:last-child{color:#6b7280}.directions-way-points span:last-child a{color:#3b82f6;text-decoration:none}.directions-details{padding:16px;display:flex;flex-direction:row;justify-content:space-between}.directions-details-numbers mi-time{font-weight:500}.directions-details-numbers-distance{color:#6b7280;font-size:0.875rem;font-weight:400;text-transform:lowercase}.directions-details-travel-mode-selector{display:flex;align-items:center;color:#3b82f6;text-decoration:none}.directions-details-travel-mode-selector mi-icon{width:24px;height:24px;margin-left:8px;background-color:#3b82f6}', r = class {
  constructor(e) {
    s(this, e), this.originName = void 0, this.destinationName = void 0, this.totalTravelTime = void 0, this.totalWalkingDistance = void 0, this.travelMode = t.Walking, this.unit = n.Metric, this.translations = {
      from: "From",
      to: "To",
      avoidStairs: "Avoid stairs",
      walk: "Walk",
      walking: "Walking",
      bike: "Bike",
      bicycling: "Bicycling",
      transit: "Transit",
      car: "Car",
      driving: "Driving"
    };
  }
  /**
   * Get travel mode as a string. Eg. "Walking", "Driving", "Transit", "Bicycling".
   *
   * @returns {string}
   */
  getTravelModeString() {
    switch (this.travelMode) {
      case t.Walking:
        return this.translations.walk;
      case t.Driving:
        return this.translations.car;
      case t.Transit:
        return this.translations.transit;
      case t.Bicycling:
        return this.translations.bike;
      default:
        return this.translations.walk;
    }
  }
  /**
   * Get icon name for travel mode.
   *
   * @returns {string}
   */
  getTravelModeIconName() {
    switch (this.travelMode) {
      case t.Walking:
        return "walk";
      case t.Driving:
        return "car";
      case t.Transit:
        return "transit";
      case t.Bicycling:
        return "bike";
      default:
        return "walk";
    }
  }
  render() {
    return i("div", { class: "directions" }, this.originName && this.destinationName ? this.renderWayPoints() : null, i("div", { class: "directions-details" }, this.totalTravelTime >= 0 || this.totalWalkingDistance >= 0 ? i("div", { class: "directions-details-numbers" }, this.totalTravelTime >= 0 ? i("div", null, i("mi-time", { seconds: this.totalTravelTime })) : null, this.totalWalkingDistance >= 0 ? i("div", { class: "directions-details-numbers-distance" }, i("mi-distance", { meters: this.totalWalkingDistance }), " ", this.translations.walking.toLowerCase()) : null) : null, i("a", { href: "#", class: "directions-details-travel-mode-selector" }, this.getTravelModeString(), i("mi-icon", { "icon-name": this.getTravelModeIconName() }))));
  }
  /**
   * Render direction way points.
   *
   * @returns {JSX.Element}
   */
  renderWayPoints() {
    return i("div", { class: "directions-way-points" }, i("span", null, this.translations.to, " ", this.destinationName), i("span", null, this.translations.from, " ", i("a", { href: "#" }, this.originName)));
  }
};
r.style = a;
export {
  r as mi_route_instructions_heading
};
//# sourceMappingURL=mi-route-instructions-heading.entry-8d372b90.mjs.map
