import styled from "styled-components";
import React, { useCallback } from "react";
import { Tag, Tooltip, Icon } from "antd";

const Title = styled.div`
  font-size: 16px;
  font-family: Microsoft YaHei;
  color: rgba(51, 51, 51, 1);
  margin: 15px 30px;
  margin-top:30px;
`;
const Tip = styled.span`
  font-size: 12px;
  
`;
const tagConfig = {
  color: "blue",
  closable: true,
  style:{border:"0"},
};

export default ({ selected, remove }) => {
  return (
    <React.Fragment>
      <Title>选择期望工作城市:</Title>
      <div style={{ marginLeft: "30px" }}>
        {Array.from(selected.entries()).map(([key, isCurrCity]) => {
          if (isCurrCity) {
            return (
              <Tag {...tagConfig} key={key} onClose={() => remove(key)}>
                <Icon type="home" color="blue" />
                {key}
                <Tip>(当前定位城市)</Tip>
              </Tag>
            );
          } else {
            return (
              <Tag {...tagConfig} key={key} onClose={() => remove(key)}>
                {key}
              </Tag>
            );
          }
        })}
      </div>
    </React.Fragment>
  );
};
