import type { Component } from "solid-js";
import { For } from "solid-js";
import { A } from "@solidjs/router";
import { heroSideCard, heroSummary, quickStats, spotlightStats } from "./dashboard.data";
import styles from "./dashboard-hero.module.scss";

const DashboardHero: Component = () => {
	return (
		<section class={styles.heroGrid}>
			<div class={styles.heroCard}>
				<div class={styles.heroCopy}>
					<p class={styles.eyebrow}>{heroSummary.eyebrow}</p>
					<h1>{heroSummary.title}</h1>
					<p>{heroSummary.description}</p>

					<div class={styles.metricRow}>
						<For each={spotlightStats}>
							{(stat) => (
								<div class={styles.metricPill}>
									<span classList={{ [styles.metricIcon]: true, [styles[stat.tone]]: true }}>{stat.label.slice(0, 1)}</span>
									<div>
										<p>{stat.label}</p>
										<strong>{stat.value}</strong>
									</div>
								</div>
							)}
						</For>
					</div>
				</div>

				<div class={styles.heroVisual} aria-hidden="true">
					<div class={styles.orbit}></div>
					<For each={heroSummary.visualBadges}>{(badge) => <div class={styles.visualCard}>{badge}</div>}</For>
				</div>
			</div>

			<div class={styles.sideCard}>
				<h2>{heroSideCard.title}</h2>
				<p>{heroSideCard.description}</p>
				<A href={heroSideCard.buttonHref} class={styles.sideCardAction}>
					{heroSideCard.buttonLabel}
				</A>

				<div class={styles.quickStats}>
					<For each={quickStats}>
						{(stat) => (
							<div class={styles.statCard}>
								<p>{stat.label}</p>
								<strong>{stat.value}</strong>
							</div>
						)}
					</For>
				</div>
			</div>
		</section>
	);
};

export default DashboardHero;
