import { useState } from "react";
import { useMount } from "react-use";

export const useCollections = () => {
  const [collections, setCollections] = useState([[], [], [], [], []])
  const [loading, setLoading] = useState<boolean>(false)

  useMount(() => {
    setLoading(true)
    fetch("/api/collections", { method: "GET" })
      .then(async (res) => res.json())
      .then((data) => {
        const chunked = data.images.reduce((acc: any, _: any, i:number) => {
          acc[i % 5].push(data.images[i])
          return acc
        }, [[], [], [], [], []])
        setCollections(chunked)
      })
      .finally(() => {
        setLoading(false)
      })
  })

  return {
    collections,
    loading,
  }
};