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

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

const DashboardActivity: Component<DashboardActivityData> = (props) => {
	const points = () => props.progressPoints.map((value, index) => `${index * 54},${120 - value}`).join(" ");

	return (
		<section class={styles.section}>
			<div class={styles.header}>
				<h2>Your progress</h2>
				<A href={getDashboardProgressHref()}>Open progress</A>
			</div>

			<article class={styles.progressCard}>
				<div class={styles.progressHeader}>
					<div>
						<h3>{props.activitySummary.title}</h3>
						<p>{props.activitySummary.note}</p>
					</div>
					<div class={styles.progressBadge}>{props.activitySummary.badge}</div>
				</div>

				<svg viewBox="0 0 270 140" class={styles.chart} role="img" aria-label="My progress line chart">
					<defs>
						<linearGradient id="progress-fill" x1="0" x2="0" y1="0" y2="1">
							<stop offset="0%" stop-color="var(--blue-300)" stop-opacity="0.55" />
							<stop offset="100%" stop-color="var(--blue-300)" stop-opacity="0.05" />
						</linearGradient>
					</defs>

					<line x1="0" y1="120" x2="270" y2="120" class={styles.axis} />
					<polyline points={`0,120 ${points()} 270,120`} class={styles.area} />
					<polyline points={points()} class={styles.line} />
				</svg>

				<div class={styles.monthRow}>
					<For each={props.progressLabels}>{(label) => <span>{label}</span>}</For>
				</div>
			</article>

			<div class={styles.highlightGrid}>
				<For each={props.highlightCards}>
					{(card) => (
						<article classList={{ [styles.highlightCard]: true, [styles[card.tone]]: true }}>
							<strong>{card.value}</strong>
							<h3>{card.label}</h3>
							<p>{card.note}</p>
						</article>
					)}
				</For>
			</div>
		</section>
	);
};

export default DashboardActivity;
