viewer/src/components/ContentCarousel.tsx

import React from "react";
import Carousel from "./Carousel";
import { Category } from "../lib/types";
import { useUrdfsByCategory } from "@/hooks/useUrdfData";
import { Skeleton } from "@/components/ui/skeleton";

interface ContentCarouselProps {
  category: Category;
}

const ContentCarousel: React.FC<ContentCarouselProps> = ({ category }) => {
  const { data: filteredItems, isLoading } = useUrdfsByCategory(category.id);

  if (isLoading) {
    return (
      <div className="relative w-full">
        <Skeleton className="h-64 w-full" />
      </div>
    );
  }

  return filteredItems.length > 0 ? (
    <div className="relative w-full">
      <Carousel title={category.name} items={filteredItems} />
    </div>
  ) : null;
};

export default ContentCarousel;