import CategoryCard from "@/components/category/category-card";
import { Category } from "@/server/db/schema";
import React from "react";
import { Skeleton } from "@/components/ui/skeleton";

export const CATEGORY_GRID_CLASS =
  "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3";

function CategoryGrid({ categories }: { categories: Category[] }) {
  return (
    <menu className={CATEGORY_GRID_CLASS}>
      {categories.map((category, idx) => (
        <li key={idx}>
          <CategoryCard {...category} />
        </li>
      ))}
    </menu>
  );
}

export default CategoryGrid;

export function CategoryGridSkeleton() {
  const range = Array.from(new Array(6).keys());
  return (
    <ul className={CATEGORY_GRID_CLASS}>
      {range.map((i) => (
        <li key={i}>
          <Skeleton className="h-12 w-full" />
        </li>
      ))}
    </ul>
  );
}