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

const Header = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

const Title = styled.div`
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
`;
const tagConfig = {
  color: "blue",
  closable: true,
  style:{border:"0"},
};
export default ({ selected, remove }) => {
  const tag = (key) => (
    <Tag {...tagConfig} key={key} onClose={() => remove(key)}>
      {key.length >= 4 ? `${key.substring(0, 4)}...` : key}
    </Tag>
  );
  const wrapper = (key) => {
    if (key.length >= 4) {
      return <Tooltip title={key} key={key}>{tag(key)}</Tooltip>;
    } else {
      return tag(key);
    }
  };
  return (
    <Header>
      <Title>选择职位类别</Title>
      <div>{Array.from(selected.keys()).map((key) => wrapper(key))}</div>
    </Header>
  );
};
