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

import assetImage from "../../assets/image/image.png";

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

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

  return (
    <div className="card-container">
      <div className="icon">
        <DownloadIcon />
      </div>
      <div className="image-container">
        <img src={assetImage} alt={assetName} />
      </div>
      <div className="assets-container">
        <div className="name-container">
          <div className="assets-name">{assetName}</div>
          <div className="assets-date">{uploadedOn}</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) => (
            <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;