import React, { useEffect, useState } from "react";

const List = (props) => {
  const [items, setItems] = useState([]);
  const [selected, setSelected] = useState("");

  useEffect(() => {
    if (selected) {
      const tempItems = items;
      const position = tempItems.findIndex((item) => item === selected);
      tempItems.splice(position, 1);
      tempItems.unshift(selected);

      setItems(() => [...tempItems]);
    } else {
      setItems(() => [...props?.items]);
    }
  }, [selected]);

  return (
    <div>
      <ul>
        {items.length
          ? items.map((item) => (
              <li
                className="cursor-pointer"
                onClick={() => setSelected(item)}
                key={item}
              >
                {item}
              </li>
            ))
          : null}
      </ul>
    </div>
  );
};

export default List;
