// @flow

import React from 'react';
import styled from 'styled-components';

const ListItem = styled.li`
  text-decoration: ${({ completed }) => (completed ? 'line-through' : 'none')}
`;

type Props = {
  todoList: TodoList
};

const List = (props: Props) =>
  <ul className="collection">
    {props.todoList.map((todo, i) =>
      <ListItem className="collection-item" key={i} completed={todo.completed}>
        {' '}
        <span role="menuitem" onClick={props.onClick.bind(null, i)}>
          {todo.text}
        </span>
        <button
          className="btn-floating btn-small waves-effect waves-light red"
          onClick={props.deleteListItem.bind(null, i)}
        >
          X
        </button>
      </ListItem>
    )}
  </ul>;
export default List;

@@ -30,16 +30,74 @@
 react';%0A
+import %7B List as SemanticList %7D from 'semantic-ui-react';%0A
 import s
@@ -139,20 +139,23 @@
 nst List
-Item
+Content
  = style
@@ -159,11 +159,30 @@
 yled
-.li
+(SemanticList.Content)
 %60%0A  
@@ -340,33 +340,20 @@
 %0A  %3C
-ul className=%22collection%22
+SemanticList
 %3E%0A  
@@ -398,52 +398,33 @@
    %3C
-ListItem className=%22collection-i
+SemanticList.I
 tem
-%22
  key=%7Bi%7D
  com
@@ -423,246 +423,243 @@
 =%7Bi%7D
- completed=%7Btodo.completed%7D%3E%0A        %7B' '%7D%0A        %3Cspan role=%22menuitem%22 onClick=%7Bprops.onClick.bind(null, i)%7D%3E%0A          %7Btodo.text%7D%0A        %3C/span%3E%0A        %3Cbutton%0A          className=%22btn-floating btn-small waves-effect waves-light red
+%3E%0A        %3CListContent%0A          onClick=%7Bprops.onClick.bind(null, i)%7D%0A          completed=%7Btodo.completed%7D%0A        %3E%0A          %7Btodo.text%7D%0A        %3C/ListContent%3E%0A        %3CSemanticList.Icon%0A          name=%22github%22%0A          size=%22large
 %22%0A  
@@ -715,32 +715,33 @@
 i)%7D%0A        
+/
 %3E%0A      
     X%0A      
@@ -732,44 +732,23 @@
     
-    X%0A        %3C/button%3E%0A      %3C/
+%3C/Semantic
 List
+.
 Item
@@ -760,18 +760,28 @@
  )%7D%0A  %3C/
-ul
+SemanticList
 %3E;%0Aexpor

convert to semantic-ui list