import type { Component } from "solid-js";
import { A } from "@solidjs/router";
import type { AssignmentPageData } from "./assignment.data";
import styles from "./assignment-header.module.scss";

type Props = {
	data: AssignmentPageData;
};

const AssignmentHeader: Component<Props> = (props) => {
	return (
		<section class={styles.headerCard}>
			<div class={styles.headerTop}>
				<A href="/dashboard" class={styles.backLink}>
					Back to dashboard
				</A>
				<span class={styles.statusPill}>{props.data.statusLabel}</span>
			</div>

			<div class={styles.copy}>
				<p class={styles.eyebrow}>{props.data.classroomName}</p>
				<h1>{props.data.title}</h1>
				<p>{props.data.headline}</p>
				<p class={styles.description}>{props.data.description}</p>
			</div>
		</section>
	);
};

export default AssignmentHeader;
