import { RightOutlined } from "@ant-design/icons";

import closeIcon from "../../../../assets/images/public/bigScreen/close.png";

const Bubble = ({ id, title, description, onClose }) => {
  const close = () => {
    onClose && onClose();
  };

  const handleViewMore = () => {
    // navigate({
    //   pathname: '/map',
    //   search: `?id=${id}&CORP_INFO_ID=${data.CORP_INFO_ID}&mapType=${data.type}&name=${data.name}&longitude=${data.position.x}&latitude=${data.position.y}`
    // });
  };

  return (
    <div className="bubble-wrap">
      <div className="bubble-box">
        <div className="bubble-wrap__header">
          <div className="bubble-wrap__title">{title}</div>
          <div className="bubble-wrap__close" style={{ backgroundImage: `url(${closeIcon})` }} onClick={close} />
        </div>
        <div className="bubble-wrap__content">
          <div className="content__label">简介:</div>
          <p className="content__text">{description}</p>
        </div>
        <div className="bubble-wrap__footer">
          <p className="footer__text" onClick={handleViewMore}>
            查看更多
            <RightOutlined />
          </p>
        </div>
      </div>
    </div>
  );
};

export default Bubble;
