import React, { useEffect, useState } from "react";
import FilterSearch from "./FilterSearch";
import CardsContainer from "./CardsContainer";
import { getAssetImages } from "../../services/factoryBuilder/assest/assets/getAssetImages";
import SkeletonUI from "../../components/templates/SkeletonUI";
interface ModelData {
  CreatedBy: string;
  animated: string | null;
  category: string;
  description: string;
  filename: string;
  isArchieve: boolean;
  modelfileID: string;
  tags: string;
  thumbnail: string;
  uploadDate: number;
  _id: string;
  price: number;
  AssetID: string;
}
const MarketPlace = () => {
  const [models, setModels] = useState<ModelData[]>([]);
  const [filteredModels, setFilteredModels] = useState<ModelData[]>([]);
  const [isLoading, setisLoading] = useState<boolean>(false); // Loading state

  useEffect(() => {
    echo.log("opended market place");
  }, []);

  useEffect(() => {
    const filteredAssets = async () => {
      setisLoading(true);
      try {
        const filt = await getAssetImages("67d934ad0f42a1fdadb19aa6");
        setModels(filt.items);
        setFilteredModels(filt.items);
        setisLoading(false);
      } catch {
        echo.error("Failed to filter asset");
        setisLoading(false);
      }
    };
    filteredAssets();
  }, []);

  return (
    <div className="marketplace-wrapper">
      <div className="marketplace-container">
        <div className="marketPlace">
          <FilterSearch
            models={models}
            setModels={setModels}
            filteredModels={filteredModels}
          />
          {isLoading ? (
            <SkeletonUI type="assetLibrary" /> // Show loading spinner while fetching
          ) : (
            <CardsContainer models={models} />
          )}
        </div>
      </div>
    </div>
  );
};

export default MarketPlace;