import { Badge, Col, ListGroup, ListGroupItem, Row } from "reactstrap";
import { useTranslation } from "react-i18next";
import { observer } from "mobx-react-lite";
import { sprintf } from "sprintf-js";

import { formatText } from "src/Utility";
import { EtcAPIMode } from "src/wwwAPI";

export default observer(
  ({
    title,
    modes,
    drawings,
  }: {
    title: string;
    modes: EtcAPIMode[];
    drawings: string[];
  }) => {
    const { t } = useTranslation();

    return (
      <ListGroup>
        <Badge color="success">{title}</Badge>
        {modes.map(({ mode, value }) => {
          return (
            value > 0 && (
              <ListGroupItem key={mode}>
                <Row className="g-0">
                  <Col className="m-1">
                    <img className="mode" alt="" src={drawings[mode]} />
                  </Col>
                  <Col className="m-1" xs="auto">
                    <span>{sprintf(t("textHandled"), formatText(value))}</span>
                  </Col>
                </Row>
              </ListGroupItem>
            )
          );
        })}
      </ListGroup>
    );
  },
);