text: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { FormattedMessage } from '../../util/reactIntl';
  import classNames from 'classnames';
  import { lazyLoadWithDimensions } from '../../util/contextHelpers';
  
  import { NamedLink } from '../../components';
  
  import css from './SectionLocations.module.css';
  
  import zurichImage from './images/location_zurich.jpg';
  import lucerneImage from './images/location_lucerne.jpg';
  import baselImage from './images/location_basel.jpg';
  
  class LocationImage extends Component {
    render() {
      const { alt, ...rest } = this.props;
      return <img alt={alt} {...rest} />;
    }
  }
  const LazyImage = lazyLoadWithDimensions(LocationImage);
  
  const locationLink = (name, image, searchQuery) => {
    const nameText = <span className={css.locationName}>{name}</span>;
    return (
      <NamedLink name="SearchPage" to={{ search: searchQuery }} className={css.location}>
        <div className={css.imageWrapper}>
          <div className={css.aspectWrapper}>
            <LazyImage src={image} alt={name} className={css.locationImage} />
          </div>
        </div>
        <div className={css.linkText}>
          <FormattedMessage
            id="SectionLocations.listingsInLocation"
            values={{ location: nameText }}
          />
        </div>
      </NamedLink>
    );
  };
  
  const SectionLocations = props => {
    const { rootClassName, className } = props;
  
    const classes = classNames(rootClassName || css.root, className);
  
    return (
      <div className={classes}>
        <div className={css.title}>
          <FormattedMessage id="SectionLocations.title" />
        </div>
        <div className={css.locations}>
          {locationLink(
            'Zurich',
            zurichImage,
            's?address=Zürich%2C%20Switzerland&bounds=47.5246%2C9.1516%2C47.101%2C8.2535'
          )}
          {locationLink(
            'Basel',
            baselImage,
            's?address=Basel-Stadt%2C%20Switzerland&bounds=47.6007754537151%2C7.69380289114679%2C47.5193410562904%2C7.55466311402933'
          )}
          {locationLink(
            'Lucerne',
            lucerneImage,
            's?address=Lucerne%2C%20Switzerland&bounds=47.2871959251129%2C8.51371699123482%2C46.7750390354513%2C7.83663312731615'
          )}
        </div>
      </div>
    );
  };
  
  SectionLocations.defaultProps = { rootClassName: null, className: null };
  
  const { string } = PropTypes;
  
  SectionLocations.propTypes = {
    rootClassName: string,
    className: string,
  };
  
  export default SectionLocations;
  