import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom';
import { inject, observer } from "mobx-react";
import { WhiteSpace } from 'antd-mobile';
import * as Icons from '@/components/Icons';

const destinations = [
    { name: 'beijing', cover: "https://www.trippest.com/wp-content/uploads/2018/05/d1.jpg" },
    { name: 'xi\'an', cover: "https://www.trippest.com/wp-content/uploads/2018/05/d4.jpg" },
    { name: 'guilin', cover: "https://www.trippest.com/wp-content/uploads/2018/05/d3.jpg" },
    { name: 'chengdu', cover: "https://www.trippest.com/wp-content/uploads/2019/02/chengdu.jpg" },
    { name: 'shanghai', cover: "https://www.trippest.com/wp-content/uploads/2018/05/d2.jpg" }
];

@inject("store")
@observer
export class TopDestinations extends Component {
    render() {
        return (
            <Fragment>
                <h2 style={{ lineHeight: '36px', textAlign: 'center' }}>
                    {Icons.LOCATE_LG}
                    <span style={{ verticalAlign: 'top' }}>Top China Destinations</span>
                </h2>
                {destinations.map((d, i) => (
                    <Fragment key={i}>
                        <WhiteSpace />
                        <div className="holly-card" style={{ width: '80%', marginLeft: 'auto', marginRight: 'auto' }}>
                            <Link to={`/tours/${d.name}`}>
                                <img src={d.cover} alt={d.name}
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                />
                            </Link>
                        </div>
                        <WhiteSpace />
                    </Fragment>
                ))}
            </Fragment>
        )
    }
}
export default TopDestinations
