import React from 'react';
import {Table, Segment} from 'semantic-ui-react';
import ListItem from './LogListItem';

const LogPanel = ({i18n, log}) => {

    return (
        <Segment>
            <Table>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>裝置名稱</Table.HeaderCell>
                        <Table.HeaderCell>接口名稱</Table.HeaderCell>
                        <Table.HeaderCell>接口號碼</Table.HeaderCell>
                        <Table.HeaderCell>接口類型</Table.HeaderCell>
                        <Table.HeaderCell>數值</Table.HeaderCell>
                        <Table.HeaderCell>時間</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>
                <Table.Body>
                    {
                        log.map((t,idx)=>{
                            return (
                                <ListItem key={idx} i18n={i18n} 
                                    data={t} />
                            )
                        })
                    }
                </Table.Body>
            </Table>
        </Segment>
    )
}

export default LogPanel;