import React from 'react';
import {Menu, Header} from 'semantic-ui-react';
import DevListItem from './DeviceListItem';

const DeviceList = ({i18n, list, delModbus, editModbus, showDev, selectDevToShow}) => {

	return (
		<Menu vertical={true}>
			<Menu.Item>
				<Menu.Header content="裝置列表" />
				<Menu.Menu>
					{
						list.map((t, idx) => {
							return (
								<DevListItem key={idx} i18n={i18n} idx={idx} data={t} delModbus={delModbus} editModbus={editModbus} showDev={showDev} selectDevToShow={selectDevToShow}/>
							)
						})
					}
				</Menu.Menu>
			</Menu.Item>
		</Menu>
	)
}

export default DeviceList;