1import React from "react";
 2import { makeStyles } from "@material-ui/core/styles";
 3import Passenger from "./Passenger";
 4import Input from "./Input";
 5
 6const PassengersList = ({
 7  passengers,
 8  places = 0,
 9  addPassenger,
10  removePassenger,
11}) => {
12  const classes = useStyles();
13
14  const emptyList = Array.apply(null, Array(places));
15  const list = Array.isArray(passengers)
16    ? emptyList.map((u, index) => passengers[index])
17    : emptyList;
18  const emptyPlaces = !!passengers ? places - passengers.length : places;
19
20  return (
21    <div className={classes.container}>
22      {emptyPlaces > 0 && <Input addPassenger={addPassenger} />}
23      {!!places &&
24        list.map((passenger, index) => (
25          <Passenger
26            key={index}
27            passenger={passenger}
28            removePassenger={removePassenger}
29          />
30        ))}
31    </div>
32  );
33};
34
35const useStyles = makeStyles((theme) => ({
36  container: { padding: theme.spacing(1, 0) },
37}));
38
39export default PassengersList;