import { View, Text,Image } from "@tarojs/components";
import './MetricItem.scss'
import { RecordMetricBtn } from "@/features/common/SpecBtns";

export default function Component(props: {
    title: string,
    value: any,
    unit: string,
    desc: string,
    btnText: string,
    themeColor: string,
    isDisabled?: boolean,
    onClickDetail: Function,
    onClick: Function,
    showBadge?: boolean,
    showDetail?:boolean
}) {
    
    function clickBtn() {
        if (props.isDisabled) {
            return
        }
        props.onClick()
    }

    return <View className="metric_bg">
        <Text className="metric_title" style={{ color: props.themeColor }} onClick={() => props.onClickDetail()}>{props.title}</Text>
        <View className="metric_value_bg" onClick={() => props.onClickDetail()}>
            <Text className="metric_value">{props.value}<Text className="metric_unit">{props.unit}</Text></Text>
        </View>
        <View className="metric_desc_bg" onClick={() => props.onClickDetail()}>
            <Text className="mteric_desc">{props.desc}</Text>
            {
                props.showDetail && <Image src={require('@assets/images/arrow3.png')} className="metric_arrow"/>
            }
            
        </View>
        <View style={{ position: 'relative',marginTop:10 }} >
            <RecordMetricBtn themeColor={props.themeColor} title={props.btnText} onClick={clickBtn} isDisable={props.isDisabled}/>
            {
                props.showBadge && <View className="badge"></View>
            }
        </View>
    </View>
}