// Path: Frontend/src/components/dashboard/dashboard-instructors.tsx

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

const DashboardInstructors: Component = () => {
	return (
		<section class={styles.section}>
			<div class={styles.header}>
				<h2>Try these next</h2>
				<A href="/dashboard/practice">View plan</A>
			</div>

			<div class={styles.list}>
				<For each={studentSupportList}>
					{(student) => (
						<article class={styles.card}>
							<div class={styles.avatar}>{student.initials}</div>
							<div class={styles.copy}>
								<h3>{student.name}</h3>
								<p>{student.meta}</p>
							</div>
							<A href={student.href} class={styles.actionLink}>
								{student.actionLabel}
							</A>
						</article>
					)}
				</For>
			</div>
		</section>
	);
};

export default DashboardInstructors;
