import React from 'react';
import {Grid, Segment, Header, List} from 'semantic-ui-react';
import StatusItem from './StatusItem';

const DevField = ({ i18n, data }) => {

    return (
        <Grid.Column>
            <Header as="h4" content={`Name: ${data.name} / Node: ${data.node}`} />
            <Segment style={{height: '400px', overflow: 'auto'}}>
                <List divided>
                {
                    data.list.map((t,idx) => (
                        <StatusItem key={idx} i18n={i18n} data={t} />
                    ))
                }
                </List>
            </Segment>
        </Grid.Column>
    )
}

export default DevField;