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

export default CardsContainer;