import { Button, CompoundButton, Text } from '@fluentui/react-components'

const WaybillsPage = () => {
    return (
        <div style={{
            display: 'flex',
            flexDirection: 'column',
            padding: '1rem',
            width: '100%',
            gap: '1rem'
        }}>
            {/* <Portal mountNode={document.querySelector('#header-portal')}>
                
            </Portal> */}

            <div style={{
                display: 'flex',
                width: '100%',
                flexDirection: 'column',
                gap: '1rem'
            }}>
                <Text size={600} weight='bold'>
                    Путевые листы
                </Text>

                <Text size={400} weight='medium'>
                    Управление маршрутами и учет расхода топлива
                </Text>

                <CompoundButton
                    onClick={() => { }}
                    style={{ display: 'flex', width: '100%', justifyContent: 'flex-start', flexDirection: 'column', gap: '2rem', alignItems: 'flex-start', cursor: 'pointer', userSelect: 'none' }}
                //icon={icon}
                >

                    <Text weight='bold' size={300}>
                        Параметры отчета
                    </Text>

                    <Text weight='bold' size={500}>

                    </Text>

                    <Text weight='regular' size={200} style={{ color: 'gray' }}>

                    </Text>

                    <Button>

                    </Button>
                </CompoundButton>

                {/* {cityId &&
                    <div style={{ display: 'flex', width: '100%', gap: '1rem', justifyContent: 'space-between' }}>
                        <BoilersCard title='Всего объектов' value={boilers && Array.isArray(boilers) ? boilers.length.toString() : ''} subtitle='' />

                        <BoilersCard title='Общий остаток' value={''} subtitle='' />

                        <BoilersCard title='Лимит на сезон' value={''} subtitle='' />

                        <BoilersCard title='Требуют внимания' value={''} subtitle='' />
                    </div>
                } */}
            </div>
        </div>
    )
}

export default WaybillsPage