import './index.less'
import {Link} from '@inertiajs/react';
import {useState} from 'react';
import {getRoute} from '@/js/utils/tool';
import {ReactComponent as Logo} from '@/assets/svg/header/logo.svg';

export default function ({children}) {
    const {pathname} = getRoute();
    const [currentTab, setCurrentTab] = useState(pathname);
    const btns = [
        {
            label: '合约交易',
            path: '/',
        },
        {
            label: '现货交易',
            path: '/spot',
        }
    ];
    const isActive = (item: any) => {
        return currentTab === item.path;
    };
    return (
        <main>
            <div className="custom-layout-head">
                <div className="layout-head-left">
                    <Logo></Logo>
                    {
                        btns.map((item: any) => (
                            <Link href={item.path}
                                  key={item.path}
                                  className={['layout-chose-button', isActive(item) ? 'active' : ''].join(' ')}>
                                {item.label}
                            </Link>
                        ))
                    }
                </div>
                <div className="layout-head-right">
                </div>
            </div>
            {children}
        </main>
    )
}

