import classNames from "classnames";
import { createBreakpoint, useLocalStorage } from "react-use";

import { Collection as CollectionType } from "@/type";

import { useCollections } from "@/components/main/hooks/useCollections";
import { Collection } from "./collection";
import { CollectionLoading } from "./loading";

const useBreakpoint = createBreakpoint({ XL: 1280, L: 1024, S: 768, XS: 640 });

export const Collections: React.FC<{ category: string }> = ({ category }) => {
  const { collections, loading } = useCollections(category);
  const breakpoint = useBreakpoint();

  if (loading) return null;

  return (
    <div className="mx-auto grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5 mt-8 lg:mt-14">
      {collections?.map((collection: CollectionType, i: number) =>
        collection?.id === -1 ? (
          <CollectionLoading key={i} prompt={collection.prompt} />
        ) : (
          <Collection
            key={category + collection.id}
            index={i}
            collection={collection}
            className={classNames("", {
              "!translate-y-12":
                breakpoint === "XL"
                  ? i % 5 === 1 || i % 5 === 3
                  : breakpoint === "L"
                  ? i % 4 === 1 || i % 4 === 3
                  : breakpoint === "S"
                  ? i % 3 === 1
                  : breakpoint === "XS"
                  ? i % 2 === 1
                  : false,
            })}
          />
        )
      )}
    </div>
  );
};