import cls from './index.module.scss';
import Container from '../../Container';
import TechSplitline from '../TechSplitline';
import EnergyCostChart from './EnergyCostChart';

function EnergyCost(props) {
	return (
		<Container title="能耗" icon="charger" className={cls.energyCost}>
			<div className={`flex flex-col`}>
				<div className={`${cls.cost__info} flex`}>
					<div
						className={`${cls.info__item} ${cls.hAuto} flex flex-col justify-center items-center self-stretch`}
					>
						<span>余 热 发 电</span>
						<span>922kWh</span>
					</div>
					<div className={cls.info__item_groups}>
						<div className={cls.info__item}>水 耗 量 : 32Km³</div>
						<div className={cls.info__item}>天 然 气 I : 83m³</div>
						<div className={cls.info__item}>电 耗 量 : 52kWh</div>
						<div className={cls.info__item}>天 然 气 II: 32m³</div>
					</div>
				</div>

				<TechSplitline />

				<EnergyCostChart />
			</div>
		</Container>
	);
}

export default EnergyCost;