import { View, Text, Image } from '@tarojs/components'
import './index.less'
import React from 'react'
import Taro from '@tarojs/taro'

/**
 * 分类投
 */

type props = {
    title: string,    // 主标题
    fitTitle?: string, // 副标题
    fitIsOnBack?: boolean,   // 点击父标题是否需要触发函数
    fitOnBack?: () => void,  // 点击父标题触发事件
    imgUrl?: string,         // 副标题的图片url
    fontSize?: number,       // 标题字体大小
    imgWidth?: number        // 图标宽度
    showBtn?: boolean,
}

const BookHead = (props: props) => {
    let { title, fitTitle, fitOnBack, fitIsOnBack = true, imgUrl, fontSize, imgWidth, showBtn = true } = props
    return <View className="Bookheader">
        <View className="title" style={{ fontSize: fontSize ? Taro.pxTransform(fontSize) : Taro.pxTransform(40) }}>{title}</View>
        {showBtn && <View className="fitTitle" onClick={fitIsOnBack ? fitOnBack : () => { }}>
            {
                fitTitle && <Text>{fitTitle}</Text>
            }
            {
                imgUrl && <Image src={imgUrl} mode="widthFix" style={imgWidth ? { width: Taro.pxTransform(imgWidth) } : {}} />
            }
        </View>}

    </View>
}

export default React.memo(BookHead)