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

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

import scss from "src/etc/ModeItem.module.scss";

export default function ModeItem({
  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={scss.mode} alt="" src={drawings[mode]} />
                </Col>
                <Col className="m-1" xs="auto">
                  <span>{sprintf(t("textHandled"), formatText(value))}</span>
                </Col>
              </Row>
            </ListGroupItem>
          )
        );
      })}
    </ListGroup>
  );
}