import React, { Component } from 'react'
import { Container, Button, Icon, Image as ImageComponent, Item, Checkbox, Divider, List, TextArea, Grid} from 'semantic-ui-react'

class Card extends Component {

  render() {
    return(
    <Container>
        <Item fluid>
           <Item.Header>
              <h2> Nº POSTE CIA ELÉCTRICA A</h2>
           </Item.Header>
           <Item.Image src='http://via.placeholder.com/300.png/09f/fff' />
           <Item.Content>
              <Item.Extra>
                 <Button color='orange'>Subir foto</Button>
                 <Checkbox label='Completar después' />
              </Item.Extra>
           </Item.Content>
        </Item>
        <Divider />
        <Button color='blue' floated='right'>Agregar Item</Button>
        <h2>Items observables</h2>
        <Grid celled>
           <Grid.Row>
              <Grid.Column>
                 <h4>Condición</h4>
              </Grid.Column>
           </Grid.Row>
           <Grid.Row>
              <Grid.Column >
                <Checkbox label='Cumple' />
              </Grid.Column>
           </Grid.Row>
           <Grid.Row>
              <Grid.Column >
              <h4>Detalle</h4>
              </Grid.Column>
           </Grid.Row>
           <Grid.Row>
              <Grid.Column >
                <TextArea placeholder='Escriba aquí' fluid />
              </Grid.Column>
           </Grid.Row>
        </Grid>
        <Divider />
        <Button.Group fluid>
           <Button color='blue' labelPosition='left' icon='left chevron' content='Anterior' />
           <Button color='orange'  content='Finalizar' />
           <Button color='blue' labelPosition='right' icon='right chevron' content='Siguiente' />
        </Button.Group>
     </Container>
    )
  }
}

export default Card