import type { Component } from "solid-js";
import { For } from "solid-js";
import { A } from "@solidjs/router";
import { getDashboardAssignmentsHref } from "../../../lib/routes";
import type { AssignmentCard } from "../shared/dashboard-types";
import styles from "./dashboard-courses.module.scss";

type DashboardCoursesProps = {
	assignmentCards: AssignmentCard[];
};

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

			<div class={styles.courseList}>
				<For each={props.assignmentCards}>
					{(assignment) => (
						<article class={styles.courseCard}>
							<div classList={{ [styles.badge]: true, [styles[assignment.accent]]: true }}>{assignment.badge}</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;
