import React from 'react';

const SurveyCard = ({ survey, onClick }) => {
    return (
        <div className="card-container" onClick={onClick}>
            <h3>{survey.title}</h3>
            <p>{survey.description}</p>
            <p>Owned by: {survey.owner.username}</p> {/* Assuming owner has a username field */}
            <p>Created on: {new Date(survey.createdAt).toLocaleDateString()}</p>
            <p>Updated on: {new Date(survey.updatedAt).toLocaleDateString()}</p>
            <p>Status: {survey.isActive ? "Active" : "Inactive"}</p>
            <div>
                <h4>Questions:</h4>
                {survey.questions.map((question, index) => (
                    <div key={index}>
                        {question.question}
                        <ul>
                            {question.options.map((option, optIndex) => (
                                <li key={optIndex}>{option.text}</li>
                            ))}
                        </ul>
                    </div>
                ))}
            </div>
            {/* Additional details can be added as needed */}
        </div>
    );
};

export default SurveyCard;