import React, { useEffect, useState } from "react";
import FilterSearch from "./FilterSearch";
import CardsContainer from "./CardsContainer";
import { fetchAssets } from "../../services/marketplace/fetchAssets";
import { getAssetImages } from "../../services/factoryBuilder/assest/assets/getAssetImages";
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;
}
const MarketPlace = () => {
  const [models, setModels] = useState<ModelData[]>([]);
  const [filteredModels, setFilteredModels] = useState<ModelData[]>([]);

  useEffect(() => {
    const filteredAssets = async () => {
      try {
        const filt = await getAssetImages("67d934ad0f42a1fdadb19aa6");
        setModels(filt.items);
        setFilteredModels(filt.items);
      } catch {}
    };
    filteredAssets();
  }, []);

  return (
    <div className="marketplace-wrapper">
      <div className="marketplace-container">
        <div className="marketPlace">
          <FilterSearch
            models={models}
            setModels={setModels}
            filteredModels={filteredModels}
          />
          <CardsContainer models={models} />
        </div>
      </div>
    </div>
  );
};

export default MarketPlace;