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

import React, { useEffect } from "react";
import {
  CommentsIcon,
  DownloadIcon,
  EyeIconBig,
  FilledStarsIconSmall,
  StarsIconSmall,
  VerifiedIcon,
} from "../../components/icons/marketPlaceIcons";

import assetImage from "../../assets/image/image.png";
import { getAssetDownload } from "../../services/marketplace/getAssetDownload";

interface CardProps {
  assetName: string;
  uploadedOn: number;
  price: number;
  rating: number;
  views: number;
  image: string;
  description: string;
  onSelectCard: (cardData: {
    assetName: string;
    uploadedOn: number;
    price: number;
    rating: number;
    views: number;
    description: string;
  }) => void;
}

const Card: React.FC<CardProps> = ({
  assetName,
  uploadedOn,
  price,
  rating,
  views,
  image,
  description,
  onSelectCard,
}) => {
  const handleCardSelect = () => {
    onSelectCard({ assetName, uploadedOn, price, rating, views, description });
  };

  return (
    <div className="card-container">
      {/* <a href={getAssetDownload(assetName)} download className="icon">
        <DownloadIcon />
      </a> */}
      <div className="image-container">
        <img src={image} alt={assetName} />
      </div>
      <div className="assets-container">
        <div className="name-container">
          <div className="assets-name">{assetName.split("_").join(" ")}</div>
          <div className="assets-date">
            Uploaded on -{" "}
            {new Date(uploadedOn).toLocaleDateString("en-GB", {
              day: "2-digit",
              month: "short",
              year: "2-digit",
            })}
          </div>
        </div>
        <div className="details">
          <div className="content">
            <EyeIconBig />
            {views}
          </div>
          <div className="content">
            <CommentsIcon />
            32
          </div>
        </div>
      </div>

      <div className="vendor-icon">
        HEXR FACTORY <VerifiedIcon />
      </div>
      <div className="stars-container">
        <div className="stars-wrapper">
          {[...Array(5)].map((_, index) => (
            <>
              {index < 3 ? (
                <FilledStarsIconSmall key={index} />
              ) : (
                <StarsIconSmall key={index} />
              )}
            </>
          ))}
        </div>
        <div className="units">
          ₹ {price}/<span>unit</span>
        </div>
      </div>
      <div className="buy-now-button" onClick={handleCardSelect}>
        Buy now
      </div>
    </div>
  );
};

export default Card;