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

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

const BLOBVector = ({ vector }) => {
  return (
    <Box gap="xsmall">
      {vector.values.map((v) => (
        <Box key={v.name} direction="row" align="center" gap="small">
          <Box width="small"><Text>{v.label ? `${v.label} (${v.name})` : v.name}</Text></Box>
          <Box width="medium" direction="row" gap="small"><Camera /><Text>Binary data</Text></Box>
        </Box>
      ))}
    </Box>
  );
};

export default BLOBVector;