import React from "react";
import { Box, Text } from "grommet";
import { StatusGoodSmall } from "grommet-icons";

import { stateToColor } from "../../utils/indi";

const LightVector = ({ vector }) => {
  return (
    <Box gap="xsmall">
      {vector.values.map((v) => (
        <Box key={v.name} direction="row" align="center" gap="small">
          <StatusGoodSmall
            size="medium"
            color={stateToColor(v.light)}
          />
          <Box><Text>{v.label || v.name}</Text></Box>
        </Box>
      ))}
    </Box>
  );
};

export default LightVector;