import React from 'react';

const NewsArticleCard = ({ article, onClick }) => {
    return (
        <div className="card-container" onClick={onClick}>
            <h3>{article.title}</h3>
            <h4>{article.subtitle}</h4>
            <p>Published on: {new Date(article.publishedAt).toLocaleDateString()}</p>
            <p>Category: {article.category}</p>
            {article.featured && <span>Featured Article</span>}
            <p>View Count: {article.viewCount}</p>
            <p>By: {article.owner.username}</p> {/* Assuming owner has a username field */}
            {/* Assuming there's an image, we display the first one */}
            {article.images.length > 0 && <img src={article.images[0].url} alt={article.images[0].altText} />}
        </div>
    );
};

export default NewsArticleCard;