Dwinzo_dev/app/src/modules/market/CardsContainer.tsx

import React, { useState } from "react";
import Card from "./Card";
import AssetPreview from "./AssetPreview";

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;
}
interface ModelsProps {
  models: ModelData[];
}

const CardsContainer: React.FC<ModelsProps> = ({ models }) => {
  const [selectedCard, setSelectedCard] = useState<{
    assetName: string;
    uploadedOn: number;
    price: number;
    rating: number;
    views: number;
    description: string;
  } | null>(null);

  const handleCardSelect = (cardData: {
    assetName: string;
    uploadedOn: number;
    price: number;
    rating: number;
    views: number;
    description: string;
  }) => {
    setSelectedCard(cardData);
  };

  return (
    <div className="cards-container-wrapper">
      <div className="cards-container-container">
        <div className="header">Products You May Like</div>
        <div className="cards-wrapper-container">
          {models.length > 0 &&
            models.map((assetDetail) => (
              <React.Fragment key={assetDetail._id}>
                <Card
                  assetName={assetDetail?.filename}
                  uploadedOn={assetDetail.uploadDate}
                  price={assetDetail?.price}
                  rating={4.5}
                  views={800}
                  onSelectCard={handleCardSelect}
                  image={assetDetail.thumbnail}
                  description={assetDetail.description}
                />
              </React.Fragment>
            ))}
          {/* <RenderOverlay> */}
          {selectedCard && (
            <AssetPreview
              selectedCard={selectedCard}
              setSelectedCard={setSelectedCard}
            />
          )}
          {/* </RenderOverlay> */}
        </div>
      </div>
    </div>
  );
};

export default CardsContainer;