import { A, useLocation, useParams } from "@solidjs/router";
import type { Component } from "solid-js";
import styles from "../../routes/assignment/assignment-page.module.scss";

const AssignmentTabs: Component = () => {
	const params = useParams();
	const location = useLocation();

	const reviewHref = () => `/assignment/${params.id}`;
	const workHref = () => `/assignment/${params.id}/work`;
	const isWork = () => location.pathname === workHref();

	return (
		<nav class={styles.tabs} aria-label="Assignment views">
			<div class={styles.tabList}>
				<A href={reviewHref()} class={`${styles.tabLink} ${!isWork() ? styles.tabLinkActive : ""}`.trim()}>
					Review
				</A>
				<A href={workHref()} class={`${styles.tabLink} ${isWork() ? styles.tabLinkActive : ""}`.trim()}>
					Work
				</A>
			</div>
		</nav>
	);
};

export default AssignmentTabs;
