import React from 'react';

import './events.scss';

import Sidebar from '../../components/sidebar/Sidebar';
import FiltersEvents from '../../components/filtersEvents/FiltersEvents';
import EventInfoShort from '../../components/eventInfoShort/EventInfoShort';

export default class Events extends React.Component {
    render() {
        const { events } = this.props;
        return (
            <>
                <Sidebar />
                <div className="container-wrap events">
                    <div className="caption-page">
                        <h2>Events</h2>
                    </div>
                    <div className="events-filters">
                        <h4>Events filters</h4>
                        <FiltersEvents />
                    </div>
                    
                    <div className="events-content">
                        <h4>Events</h4>

                        <div className="events-list">
                            {
                                events.map(event => <EventInfoShort
                                    key={event._id}
                                    title={event.title}
                                    country={event.country}
                                    city={event.city}
                                    id={event._id}
                                    eventDate={event.eventDate}
                                    imgSrc={event.mainBannerPicture} />
                                )
                            }
                        </div>
                    </div>                    
                </div>
            </>
        )
    }
}