import { CSSProperties, FC, PropsWithChildren } from "react";
import { Button } from "antd";
import classNames from "classnames";
import { PlusOutlined } from "@ant-design/icons";
import _style from "./index.module.scss";

export interface PaneProps {
  style?: CSSProperties;
  title: string;
  tips?: string;
  required?: boolean;
  onAdd?: () => void;
}

export const Pane: FC<PropsWithChildren<PaneProps>> = ({
  title,
  tips,
  style,
  required,
  children,
  onAdd,
}) => {
  return (
    <div
      style={style}
      className={classNames(
        {
          [_style.required]: required,
        },
        _style.pane
      )}
    >
      <div className={_style.paneHeader}>
        <p>
          {title}
          {tips && <span>{tips}</span>}
        </p>

        <Button
          type="primary"
          icon={<PlusOutlined />}
          className="second-button"
          size="large"
          onClick={onAdd}
        >
          新增
        </Button>
      </div>

      <div className={_style.paneMain}>{children}</div>
    </div>
  );
};
