import { View, Text } from "@tarojs/components";
import './Box.scss'
import { BoxType } from "@/utils/types";
import Taro from "@tarojs/taro";
import { ColorType } from "@/context/themes/color";

export default function Component(props: {
    children: React.ReactNode,
    title?: string,
    header?: React.ReactNode,
    style?: any,
    type?: BoxType,
    onClick?: Function,
    tranparentBg?:boolean
}) {

    function onClick(e) {
        if (props.onClick) {
            props.onClick()
            return
        }
        Taro.vibrateShort({
            type: 'medium'
        })
    }

    switch (props.type) {
        case BoxType.outline:
            return <View>
                {props.header ? props.header : null}
                <View className="box-outline" style={{ ...props.style }} onTap={onClick}>
                    {
                        props.title && <Text className="box-title">{props.title}</Text>
                    }
                    {props.children}
                </View>
            </View>
    }

    return <View className="box-container" style={{ ...props.style,backgroundColor:props.tranparentBg?'transparent':ColorType.box }} onTap={onClick}>
            {
                props.title && <Text className="box-title">{props.title}</Text>
            }
            {props.children}
        </View>
}