import { EtcAPIMode } from "@/type/wwwAPI";
import { formatText } from "@/utilities/Utility";
import { useTranslations } from "next-intl";
import Image, { StaticImageData } from "next/image";
import Col from "react-bootstrap/Col";
import ListGroup from "react-bootstrap/ListGroup";
import ListGroupItem from "react-bootstrap/ListGroupItem";
import Row from "react-bootstrap/Row";

export default function ModesView({
  title,
  modes,
  drawings,
}: {
  title: string;
  modes: EtcAPIMode[];
  drawings: (string | StaticImageData)[];
}) {
  const t = useTranslations();

  return (
    <ListGroup>
      <ListGroupItem>{title}</ListGroupItem>
      {modes.map(({ mode, value }) => {
        return (
          value > 0 && (
            <ListGroupItem key={mode}>
              <Row>
                <Col>
                  <Image height={24} alt="" src={drawings[mode]} />
                </Col>
                <Col xs="auto">
                  {t("textHandled", { value: formatText(value) })}
                </Col>
              </Row>
            </ListGroupItem>
          )
        );
      })}
    </ListGroup>
  );
}