import React from 'react'

export default function Location(props) {
    return (
        <div className="location-card">
            <div className="wrapper">
                <img src={props.imgUrl} className="location-image" />
                <div className="info-wrapper">
                    <div className="first-wrapper">
                        <p className="location">{props.location}</p>
                        <a href={props.googleMapsUrl} className="google-maps-link">View on Google Maps</a>
                    </div>
                </div>
                <div className="second-wrapper">
                    <h1 className="city-name">{props.title}</h1>
                    <p className="date"><strong>{props.startDate} - {props.endDate}</strong></p>
                    <p className="description">{props.description}</p>
                </div>
            </div>
            <hr />
        </div>
    )
}