//弹出框样式公用（举手之劳和随手拍弹出框入口页）
import { Popup } from "@taroify/core";
import { ScrollView, View, Text, Image } from "@tarojs/components";
import { CSSProperties, FC, ReactNode } from "react";
import close from "@/assets/icon/close.png";
import "./index.less";
interface PopupCompProps {
  preTitle: string; //标题
  borderTitle: string; //有boder标题
  open: boolean; //是否打开
  children: ReactNode; //内容
  borderColor?: CSSProperties["color"]; //颜色
  onClose: () => void; //关闭
}
const PopupComp: FC<PopupCompProps> = ({
  open,
  preTitle,
  borderTitle,
  children,
  borderColor = "#A26CFF",
  onClose,
}) => {
  return (
    <Popup
      rounded
      open={open}
      style={{ maxHeight: "96vh", overflow: "hidden" }}
      placement="bottom"
    >
      <View className="popup-content">
        <View className="popup-content_title">
          {preTitle}
          <Text
            className="title_border"
            style={{ "--color": borderColor } as CSSProperties}
          >
            {borderTitle}
          </Text>
        </View>
        <ScrollView scrollY className="popup-content_scrollView">
          {children}
          <View className="block"></View>
        </ScrollView>
        <View className="poup-footer">
          <Image className="close-icon" src={close} onClick={onClose} />
        </View>
      </View>
    </Popup>
  );
};
export default PopupComp;
