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

const DashboardMessagesFocus: Component = () => {
	return (
		<section class={styles.section}>
			<article class={styles.heroCard}>
				<div class={styles.heroCopy}>
					<p class={styles.eyebrow}>Messages</p>
					<h1>Your message centre</h1>
					<p>Keep dashboard context while you check tutor guidance, assignment reminders, and quick study nudges that point you to the next useful action.</p>
				</div>

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

			<div class={styles.threadList}>
				<For each={messageFocusThreads}>
					{(thread) => (
						<article class={styles.threadCard}>
							<div class={styles.threadTop}>
								<div class={styles.senderWrap}>
									<span class={styles.avatar}>{thread.initials}</span>
									<div>
										<h2>{thread.sender}</h2>
										<p>{thread.role}</p>
									</div>
								</div>
								<div class={styles.threadMeta}>
									<span>{thread.timestamp}</span>
									{thread.unread && <strong class={styles.unread}>Unread</strong>}
								</div>
							</div>

							<p class={styles.preview}>{thread.preview}</p>

							<div class={styles.threadActions}>
								<A href={thread.actionHref} class={styles.primaryAction}>
									{thread.actionLabel}
								</A>
							</div>
						</article>
					)}
				</For>
			</div>
		</section>
	);
};

export default DashboardMessagesFocus;
