import type { Component } from "solid-js";
import { For } from "solid-js";
import { A } from "@solidjs/router";
import { settingsFocusPanels, settingsFocusStats, topbarSummary } from "./dashboard.data";
import styles from "./dashboard-settings-focus.module.scss";

const DashboardSettingsFocus: Component = () => {
	return (
		<section class={styles.section}>
			<article class={styles.heroCard}>
				<div class={styles.heroCopy}>
					<p class={styles.eyebrow}>Settings</p>
					<h1>Your dashboard settings</h1>
					<p>Keep this inside the dashboard shell so profile details, study preferences, and learner goals feel like part of the same student workspace.</p>
				</div>

				<div class={styles.profileChip}>
					<span class={styles.avatar}>{topbarSummary.profileBadge}</span>
					<div>
						<strong>{topbarSummary.profileName}</strong>
						<span>{topbarSummary.profileRole}</span>
					</div>
				</div>

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

			<div class={styles.panelGrid}>
				<For each={settingsFocusPanels}>
					{(panel) => (
						<article class={styles.panelCard}>
							<div class={styles.panelBody}>
								<div class={styles.panelCopy}>
									<h2>{panel.title}</h2>
									<p>{panel.description}</p>
								</div>

								<div class={styles.rowList}>
									<For each={panel.rows}>
										{(row) => (
											<div class={styles.rowItem}>
												<span>{row.label}</span>
												<strong>{row.value}</strong>
											</div>
										)}
									</For>
								</div>
							</div>

							<div class={styles.panelActions}>
								<A href={panel.primaryHref} class={styles.primaryAction}>
									{panel.primaryLabel}
								</A>
								{panel.secondaryHref && panel.secondaryLabel && (
									<A href={panel.secondaryHref} class={styles.secondaryAction}>
										{panel.secondaryLabel}
									</A>
								)}
							</div>
						</article>
					)}
				</For>
			</div>
		</section>
	);
};

export default DashboardSettingsFocus;
