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] pb-[48px] mr-[90px]'>
                        <div className='title-2-cn'>{i.title}</div>
                        <div className='content-1-cn pt-[14px]'>{i.text}</div>
                    </div>
                ))
            }
        </div>
    )
}

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


    return(
        <AppContianer className='h-full'>
            <>
        <div className='h-[100vh] min-w-[900px] -translate-y-[83px] absolute top-0 left-0  w-[60vw] bg-white/40 -z-[1]'></div>
        <div className="flex items-center h-full pt-[40px]">
            <div className="left w-8/12  h-full ">
                <div className="title-1-en">
                    Functional
                    <div className='title-1-en'>
                    Features
                    </div> 
                </div>
                <div className="subTitle-1-cn py-3 flex items-center gap-x-5">
                    <div className=" w-28 h-1 bg-theme-dark rounded"></div>
                    <div>功能特点</div>
                </div>
                <div className='content-1-cn'>一键部署多样化区块链网络</div>
                <div className='flex relative justify-start pt-[60px]'>
                    <FeaturesGrid></FeaturesGrid>
                </div>
            </div>
            <div className="right h-full w-4/12 px-[10%]">
                <div className="flex-col justify-center ">
                <div  className='max-w-[320px] min-w-[280px]'>
                        <div className='title-2-cn'>弹性扩展</div>
                        <div className='content-1-cn'>支持联盟节点动态增删</div>
                    </div>
                    <div  className='max-w-[320px] min-w-[280px] mt-[46px]'>
                        <div className='title-2-cn'>运维监控</div>
                        <div className='content-1-cn'>支持区块链节点及硬件资源的实时监控</div>
                    </div>
                </div>
            </div>
        </div>
        </>
        </AppContianer>
    )

}