import { ListGroup, ListGroupItem, Button } from "reactstrap";
import React, { FunctionComponent } from "react";

const TSRules: FunctionComponent<any> = ({ rules, changeTslintState }) => {
  return (
    <ListGroup>
      {
       rules.map((rule: any, index: number) => (
          <ListGroupItem className="list-group-item  d-flex justify-content-between" index={ index }>
            <b>{ rule.name } </b><span><a href={ rule.link }>
            <Button color="info" className="mx-2">Info</Button></a>
            <Button
              onClick={ () => changeTslintState(rule.name, rule.value, index) }
              color={ rule.value ? 'success' : 'danger' }
              className="mx-2">
                { rule.value ? 'On' : 'Off' }
            </Button></span>
          </ListGroupItem>
        ))
      }
    </ListGroup>
  )
}

export default TSRules;