import { ListItem } from "./ListItem";

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

export function WinkPicker(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={"078041189916"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041143246"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041138457"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041131861"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041132141"} upcsPicked={props.upcsPicked}></ListItem>

          <ListItem upc={"078041189909"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041143239"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041138440"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041131854"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041132134"} upcsPicked={props.upcsPicked}></ListItem>

          <ListItem upc={"078041189893"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041143222"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041138433"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041131847"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041132127"} upcsPicked={props.upcsPicked}></ListItem>

          <ListItem upc={"078041189886"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041143215"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041138426"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041131830"} upcsPicked={props.upcsPicked}></ListItem>
          <ListItem upc={"078041132110"} upcsPicked={props.upcsPicked}></ListItem>
        </ul>
      </div>
      <button type="button" onClick={props.onSubmit}>
        Submit Wink
      </button>
    </div>
  );
}