import React from "react";
import { Box, TextInput, Button } from "grommet";

const NumberVector = ({ vector }) => {
  return (
    <Box gap="xsmall">
      {vector.values.map((v) => (
        <Box key={v.name} direction="row" align="center">
          <Box width="small">{v.label || v.name} ({v.min},{v.max},{v.step})</Box>
          <Box width="small">{v.formated || v.number}</Box>
          {vector.permission !== 0 && (
            <Box direction="row" align="center" gap="xsmall">
              <TextInput></TextInput>
              <Button primary label="Set"></Button>
            </Box>
          )}
        </Box>
      ))}
    </Box>
  );
};

export default NumberVector;