import titleBackground from "~/assets/images/map_bi/content/title_bg1.png";
import titleIcon from "~/assets/images/map_bi/content/title_ico.png";
import "./index.less";

/**
 * 港区大屏信息区块的统一外层，负责展示标题并承载区块业务内容。
 */
function Panel({ title, extra, children, className = "" }) {
  return (
    <section className={`port-panel ${className}`.trim()}>
      <div
        className="port-panel__title"
        style={{ backgroundImage: `url(${titleBackground})` }}
      >
        <div className="port-panel__title-main">
          <div
            className="port-panel__title-icon"
            style={{ backgroundImage: `url(${titleIcon})` }}
          />
          <div className="port-panel__title-label">{title}</div>
        </div>
        <div className="port-panel__title-extra">{extra}</div>
      </div>
      <div className="port-panel__content">{children}</div>
    </section>
  );
}

export default Panel;
