import { useEffect, useState } from "react";
import { useParams } from "react-router";
import ItemCard from "~/Components/Items/ItemCard";
import { FetchItems } from "~/Lib/Item";
import type Item from "~/Models/Item";


const LibraryItems = () => {
  const params = useParams();
  const [items, setItems] = useState<Array<Item>>([]);

  useEffect(() => {
    const librayId = params["libraryId"];

    FetchItems(librayId!).then(response => {
      setItems(response);
    });
  });

  return (
    <div>
      {items.length > 0 && items.map(item => {
        return (
          <ItemCard key={item.id} item={item} />
        )
      })}
    </div>
  );
}

export default LibraryItems;