import { getThemeColor } from "@/features/health/hooks/health_hooks";
import { rpxToPx } from "@/utils/tools";
import { View, Text } from "@tarojs/components";
import { useSelector } from "react-redux";
import './onboard.scss'
import NewButton, { NewButtonType } from "../base/new_button";

export default function OnBoard(props: { title: string, desc: string, btnTitle: string, onClick: any, color?: string }) {
    const health = useSelector((state: any) => state.health);
    return <View className="onboard_bg">
        <Text className="onboard_title">{props.title}</Text>
        <Text className={health.mode=='ACTIVE'?"onboard_desc g01":"onboard_desc g02"} 
        style={{fontSize:health.mode=='ACTIVE'?rpxToPx(24):rpxToPx(26)}}>{props.desc}</Text>
        <NewButton
            type={NewButtonType.fill}
            color={props.color ? props.color : getThemeColor(health.mode)}
            onClick={props.onClick}
            title={props.btnTitle}
            width={rpxToPx(374)}
            height={rpxToPx(72)}
        />
        <View className="border_footer_line" />
    </View>
}