import type { DashboardSummary as DashboardSummaryType } from "../../../api/dashboard";

interface DashboardSummaryProps {
	summary: DashboardSummaryType;
	activeSessionsCount: number;
}

const summaryCards = [
	{ label: "Open sessions", key: "openSessions" },
	{ label: "Projects", key: "projects" },
	{ label: "Repositories", key: "repositories" },
] as const;

export const DashboardSummary = ({
	summary,
	activeSessionsCount,
}: DashboardSummaryProps) => {
	return (
		<div className="home-summary-grid">
			{summaryCards.map((card) => (
				<article className="card home-summary-card" key={card.label}>
					<p className="card-label">{card.label}</p>
					<p className="card-value">
						{card.key === "openSessions"
							? activeSessionsCount
							: card.key === "projects"
								? summary.projects
								: summary.repositories}
					</p>
				</article>
			))}
		</div>
	);
};