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

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

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

    onSelectCard({
      assetName,
      uploadedOn,
      price,
      rating,
      views,
      description,
      AssetID,
    });
  };

  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) => (
            <React.Fragment key={index}>
              {index < 3 ? <FilledStarsIconSmall /> : <StarsIconSmall />}
            </React.Fragment>
          ))}
        </div>
        <div className="units">
          ₹ {price}/<span>unit</span>
        </div>
      </div>
      <button
        id={`${AssetID}-asset-buy`}
        className="buy-now-button"
        onClick={handleCardSelect}
      >
        Buy now
      </button>
    </div>
  );
};

export default Card;