import { createSignal } from "solid-js";

interface ListItemProps {
  upc: string;
  upcsPicked: Set<string>;
}

export function ListItem(props: ListItemProps) {
  const [isSelected, setIsSelected] = createSignal(false);

  function handleClick() {
    setIsSelected((prevSelected) => !prevSelected);
    if (isSelected()) {
      props.upcsPicked.add(props.upc);
    } else {
      props.upcsPicked.delete(props.upc);
    }
  }

  return (
    <li onClick={handleClick} classList={{ selected: isSelected() }} data-upc={props.upc}></li>
  );
}