import type { Component } from "solid-js";
import { For } from "solid-js";
import { A } from "@solidjs/router";
import { practiceFocusCards, practiceFocusStats } from "./dashboard.data";
import styles from "./dashboard-practice-focus.module.scss";

const DashboardPracticeFocus: Component = () => {
	return (
		<section class={styles.section}>
			<article class={styles.heroCard}>
				<div class={styles.heroCopy}>
					<p class={styles.eyebrow}>Practice</p>
					<h1>Your practice space</h1>
					<p>Stay in dashboard mode to focus on the skill that needs the most attention, choose the right support mode, and jump into the next useful question set.</p>
				</div>

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

			<div class={styles.cardGrid}>
				<For each={practiceFocusCards}>
					{(card) => (
						<article class={styles.practiceCard}>
							<span classList={{ [styles.toneChip]: true, [styles[card.tone]]: true }}>{card.meta}</span>

							<div class={styles.cardBody}>
								<h2>{card.title}</h2>
								<p>{card.description}</p>
							</div>

							<div class={styles.cardActions}>
								<A href={card.primaryHref} class={styles.primaryAction}>
									{card.primaryLabel}
								</A>
								<A href={card.secondaryHref} class={styles.secondaryAction}>
									{card.secondaryLabel}
								</A>
							</div>
						</article>
					)}
				</For>
			</div>
		</section>
	);
};

export default DashboardPracticeFocus;
