import { IProps } from "@/common/Iprops.interface"
import StyledButton from "@/components/StyledButton"
import { baasBalls } from "@/config/ballSetting"
import { baasBg } from "@/config/bgSetting"
import { AppContianer } from "@/layouts/AppContianer"
import { PageLayout } from "@/layouts/PageLayout"
import { useState } from "react"

interface ClassesType extends IProps {}
export const Classes = (props:ClassesType)=>{
    const [activedItem,setActivedItem] = useState(0)
    return(
    <PageLayout ballConfig={baasBalls[1].setting} gradientConfig={baasBg[1].config}>
        <AppContianer className='flex h-full w-full items-center'>
            <div className="flex w-full justify-between items-start -translate-y-[5vh]">
                <div className="left">
                    <div className='content-title-cn '>区块链赋能班</div>
                    <div className='hero-title'>Blockchain</div>
                    <div className='hero-title'>Open Class</div>
                    <div className="normal-text mt-8">比特学堂致力于成为区块链领域的哈弗商学院</div>
                    <div className="normal-text">培养下一代“区块链巨子”</div>
                    <StyledButton text='购买课程' color="black" className="mt-20"></StyledButton>
                </div>
                <div className="right">
                     <div className='flex gap-x-5'>
                        <div className='min-w-[32vw] min-h-[380px] bg-gray-600 rounded-md'></div>
                        <div className='normal-text'>
                            <div className='content-title-cn'>第一章</div>
                            <div> <span className='hero-title text-blue-600 inline'>1</span> <span className='content-title-cn'>课</span></div>
                        </div>
                     </div>
                     <div className='flex text-center mt-14 gap-x-5 items-end'>
                        <div className={activedItem===0?'item bg-white w-36 h-[200px] px-3 py-5 rounded-t-lg':''}>
                            <div className={activedItem===0?"content-sub-title-cn":"content-sub-title-cn opacity-80"}>欢迎进入区块链世界</div>
                            <div className={activedItem===0?"py-2 normal-text":" hidden"}>第一章</div>
                            <div className={activedItem===0?"text-4xl font-galano":"text-4xl font-galano"}>
                                1
                            </div>
                        </div>
                        <div className={activedItem!==0?'item bg-white w-36 px-3 py-5 rounded-t-lg':' bg-white/20  w-32 px-3 py-5 rounded-t-lg'}>
                            <div className={activedItem!==0?"content-sub-title-cn":"content-sub-title-cn opacity-80"}>欢迎进入区块链世界</div>
                            <div className={activedItem!==0?"py-2 normal-text":" hidden"}>第一章</div>
                            <div className={activedItem!==0?"text-4xl font-galano":"normal-text font-galano"}>
                                2
                            </div>
                        </div>
                     </div>
                </div>
            </div>
        </AppContianer>
    </PageLayout>
    )
} 