import React from "react";
import "../css/dashboard.css";

function Card({ title, createdBy, startDate, endDate, memberCount, coverImage }) {
	return (
		<div
			className="tour-card"
			style={{
				backgroundImage: "url(" + coverImage + ")",
			}}
		>
			<div className="card-overlay"></div>
			<div
				className=" d-flex dir-col justify-content-between height-100 over-1"
				style={{ display: "inline-flex" }}
			>
				<h2 className="host-name">Created By {createdBy?.name ?? "Anonymous"} </h2>
				<div className="card-details">
					<p className="tour-name p-0 m-0">{title}</p>
					<span className="team">{memberCount}</span>
					<br />
					<p className="tour-date">
						{startDate} - {endDate}
					</p>
				</div>
			</div>
		</div>
	);
}

export default Card;
