import { useEffect, useRef } from 'react';

import cls from './container.module.less';

import IconStack from '../assets/Icon/icon-stack.png';
import IconGood from '../assets/Icon/icon-good.png';
import IconCharger from '../assets/Icon/icon-charge.png';
import IconSmoke from '../assets/Icon/icon-taiji.png';

const Container = (props) => {
	let icon = useRef(null);

	switch (props.icon) {
		case 'kiln':
			icon.current = IconStack;
			break;
		case 'good': // 良品率
			icon.current = IconGood;
			break;
		case 'charger':
			icon.current = IconCharger;
			break;
		case 'smoke':
			icon.current = IconSmoke;
			break;
	}

	return (
		<div className={`${cls.container} ${props.className}`}>
			<div className={cls.container__head}>
				<img
					src={icon.current}
					alt="#"
					className={props.icon == 'kiln' ? cls.bigger : ''}
				/>
				<h2>{props.title}</h2>
			</div>
			<div className={cls.container__content}>{props.children}</div>
		</div>
	);
};

export default Container;