import { useEffect, useState } from "react";
import LibraryCard from "~/Components/Libraries/LibraryCard";
import { FetchLibraries } from "~/Lib/Library";
import type Library from "~/Models/Library";

export const meta = () => {
  return [
    { title: "New React Router App" },
  ];
};

const Libraries = () => {
  const [libraries, setLibraries] = useState<Array<Library>>([]);

  useEffect(() => {
    FetchLibraries().then(response => {
      setLibraries(response);
    });
  }, []);

  return (
    <div>
      {libraries.length > 0 && libraries.map(library => {
        return (
          <LibraryCard library={library} key={library.id} />
        );
      })}
    </div>
  );
};

export default Libraries;