import { IProps } from "@/common/Iprops.interface";
import { AppContianer } from "@/layouts/AppContianer";

interface FeaturesType extends IProps{

}
const FeaturesGrid = ()=>{
    const data = [
        {
            title:'快速构建',
            text:'支持一键快速构建联盟链、平行链等区块链网络'
        },
        {
            title:'隐私保护',
            text:'提供权限管理、身份关联、数据加密等方式保证数据安全'
        },
        {
            title:'灵活部署',
            text:'支持节点一键自动化部署省去手动部署等大量时间和精力'
        },
        {
            title:'多组件支持',
            text:'智能合约模块可插拔 支持智能合约语言的多样化包括Solidity,Java,C++和Golang等成熟开发语言'
        }
    ]
    return(
        <div className="featuresGrid">
            {
                data.map((i,index)=>(
                    <div key={index} className='max-w-[320px] min-w-[280px]'>
                        <div className='content-title-cn '>{i.title}</div>
                        <div className='des-cn'>{i.text}</div>
                    </div>
                ))
            }
        </div>
    )
}

export const Features = (props: FeaturesType)=>{


    return(
        <AppContianer className='h-full'>
        <div className="flex items-center h-full">
            <div className="left w-8/12  h-full py-16">
                <div className="hero-title">
                    Functional
                    <div className='clip-title'>
                    Features
                    </div> 
                </div>
                <div className="sub-title-cn">
                    功能特点
                </div>
                <div className='des-cn'>一键部署多样化区块链网络</div>
                <div className='flex relative justify-end pt-[5rem]'>
                    <FeaturesGrid></FeaturesGrid>
                </div>
            </div>
            <div className="right py-16  h-full w-4/12 px-[10%]">
                <div className="flex-col justify-center ">
                <div  className='max-w-[320px] min-w-[280px]'>
                        <div className='content-title-cn'>弹性扩展</div>
                        <div className='des-cn'>支持联盟节点动态增删</div>
                    </div>
                    <div  className='max-w-[320px] min-w-[280px] mt-[3rem]'>
                        <div className='content-title-cn'>运维监控</div>
                        <div className='des-cn'>支持区块链节点及硬件资源的实时监控</div>
                    </div>

                </div>
            </div>
        </div>
        </AppContianer>
    )

}