import styled from "styled-components";
import React from "react";
import { Row } from "antd";

const Button = styled.div`
  width: 100px;
  height: 46px;
  background: rgba(255, 255, 255, 1);
  border-radius: 2px;
  border: 1px solid rgba(221, 221, 221, 1);
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: rgba(51, 51, 51, 1);
  margin-left: 30px;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  &:hover {
    cursor: pointer;
  }
`;
const Title = styled.div`
  font-size: 16px;
  font-family: Microsoft YaHei;
  color: rgba(51, 51, 51, 1);
  margin:15px 30px;
  margin-bottom:5px;
`;

export default ({ select, data }) => {
  return (
    <React.Fragment>
      <Title>热门城市：</Title>
      <Row type="flex" style={{marginBottom:"40px"}}>
        {data.map((city) => (
          <Button
            key={city}
            onClick={() => {
              select(city, false);
            }}
          >
            <div>{city}</div>
          </Button>
        ))}
      </Row>
    </React.Fragment>
  );
};
