import { useEffect, useState } from 'react';
import LinkGroups from './LinkGroups';

function Links() {
  const [state, setState] = useState([]);

  const getData = async () => {
    const response = await fetch("/sui/api/links");
    const data = await response.json();
    setState(data);
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <section id="links">
      <h3>Bookmarks</h3>
      <div id="links_loop">
        {state.map((bookmarkList) => (
          <LinkGroups
            key={bookmarkList.category}
            category={bookmarkList.category}
            links={bookmarkList.links}
          />
        ))}
      </div>
    </section>
  );
}

export default Links;