import type { Component } from "solid-js";
import { For } from "solid-js";
import DashboardActivity from "./dashboard-activity";
import DashboardInsights from "./dashboard-insights";
import { progressFocusStats } from "./dashboard.data";
import styles from "./dashboard-progress-focus.module.scss";

const DashboardProgressFocus: Component = () => {
	return (
		<section class={styles.section}>
			<article class={styles.heroCard}>
				<div class={styles.heroCopy}>
					<p class={styles.eyebrow}>Progress</p>
					<h1>Your learning progress</h1>
					<p>Stay inside the dashboard to review your results, track improvement, and spot where a small practice block could lift your score fastest.</p>
				</div>

				<div class={styles.statGrid}>
					<For each={progressFocusStats}>
						{(stat) => (
							<div class={styles.statCard}>
								<strong>{stat.value}</strong>
								<span>{stat.label}</span>
							</div>
						)}
					</For>
				</div>
			</article>

			<div class={styles.contentStack}>
				<DashboardActivity />
				<DashboardInsights />
			</div>
		</section>
	);
};

export default DashboardProgressFocus;
