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

const DashboardAssignmentsFocus: Component = () => {
	return (
		<section class={styles.section}>
			<article class={styles.heroCard}>
				<div class={styles.heroCopy}>
					<p class={styles.eyebrow}>Assignments</p>
					<h1>Your assignment hub</h1>
					<p>Stay in dashboard mode to see what is live, what needs finishing, and what is ready for review.</p>
				</div>

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

			<div class={styles.groupList}>
				<For each={assignmentFocusGroups}>
					{(group) => (
						<section class={styles.group}>
							<div class={styles.groupHeader}>
								<div>
									<h2>{group.title}</h2>
									<p>{group.description}</p>
								</div>
								<span class={styles.groupCount}>{group.items.length}</span>
							</div>

							<div class={styles.cardGrid}>
								<For each={group.items}>
									{(item) => (
										<article class={styles.assignmentCard}>
											<div class={styles.cardTop}>
												<span classList={{ [styles.statusChip]: true, [styles[item.tone]]: true }}>{item.statusLabel}</span>
												<span class={styles.progressText}>{item.progressText}</span>
											</div>

											<div class={styles.cardBody}>
												<h3>{item.title}</h3>
												<p>{item.meta}</p>
												<small>{item.subMeta}</small>
											</div>

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

export default DashboardAssignmentsFocus;
