import type { Component } from "solid-js";
import { For } from "solid-js";
import { A } from "@solidjs/router";
import { assignmentCards } from "./dashboard.data";
import styles from "./dashboard-courses.module.scss";

const DashboardCourses: Component = () => {
	return (
		<section class={styles.section}>
			<div class={styles.header}>
				<h2>Keep going</h2>
				<A href="/dashboard/assignments">See all</A>
			</div>

			<div class={styles.courseList}>
				<For each={assignmentCards}>
					{(assignment) => (
						<article class={styles.courseCard}>
							<div classList={{ [styles.badge]: true, [styles[assignment.accent]]: true }}>{assignment.title.split("—")[0].trim().replace("HW", "H")}</div>
							<div class={styles.courseBody}>
								<h3>{assignment.title}</h3>
								<p>{assignment.lessons}</p>
							</div>
							<A href={assignment.href} class={styles.ctaLink}>
								{assignment.cta}
							</A>
						</article>
					)}
				</For>
			</div>
		</section>
	);
};

export default DashboardCourses;
