import React from "react";
import PropTypes from "prop-types";
import { Chip } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import styles from "./styles";

const useStyles = makeStyles(styles);

const SlimChips = ({ elements }) => {
  const classes = useStyles();

  return (
    <>
      {elements.map(item => (
        <Chip
          key={elements.indexOf(item)}
          size="small"
          label={item}
          className={classes.smallChip}
        />
      ))}
    </>
  );
};

SlimChips.propTypes = {
  elements: PropTypes.arrayOf(PropTypes.string).isRequired
};

export default SlimChips;