import React from 'react';

const BulkForgeCard = ({ bulkForge, onClick }) => {
    return (
        <div className="card-container" onClick={onClick}>
            <h3>{bulkForge.title || "Untitled Forge"}</h3>
            <p>Owned by: {bulkForge.owner.username}</p> {/* Assuming owner has a username field */}
            <p>Created on: {new Date(bulkForge.createdAt).toLocaleDateString()}</p>
            <p>Updated on: {new Date(bulkForge.updatedAt).toLocaleDateString()}</p>
            <div>
                <h4>Blocks:</h4>
                {bulkForge.blocks.map((block, index) => (
                    <div key={index}>
                        <span>{block.index}. {block.content} - {block.status}</span>
                    </div>
                ))}
            </div>
            {/* Additional details can be added as needed */}
        </div>
    );
};

export default BulkForgeCard;