import { ListItem } from "./ListItem";

interface Props {
  upcsPicked: Set<string>;
  onSubmit: () => void;
}

export function IcuPicker(props: Props) {
  return (
    <div style="display: flex; flex-direction: column; align-items: center;">
      <div class="front-panel-flex-container icu-upc-picker">
        <ul class="panel">
          <ListItem upc={"078041242734"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041243519"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041243571"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041243632"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041073062"} upcsPicked={props.upcsPicked}></ListItem>

          <ListItem upc={"078041242727"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041243502"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041243564"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041243625"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041050241"} upcsPicked={props.upcsPicked}></ListItem>

          <ListItem upc={"078041242710"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041243496"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041243557"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041243618"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041129233"} upcsPicked={props.upcsPicked}></ListItem>

          <ListItem upc={"078041242703"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041243489"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041243540"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041243601"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041227755"} upcsPicked={props.upcsPicked}></ListItem>

          <ListItem upc={"078041242697"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041243472"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041243533"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041243595"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041227762"} upcsPicked={props.upcsPicked}></ListItem>
        </ul>
      </div>
      <button type="button" onClick={props.onSubmit}>
        Submit ICU
      </button>
    </div>
  );
}
