// Path: Frontend/src/components/assignment/shared/assignment-tabs.tsx

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

type AssignmentTabsProps = {
	showWork?: boolean;
	role?: AppRole;
};

const AssignmentTabs: Component<AssignmentTabsProps> = (props) => {
	const params = useParams();
	const location = useLocation();
	const role = () => props.role ?? (location.pathname.includes("/teacher/") ? "teacher" : "student");

	const reviewHref = () => getAssignmentReviewHref(role(), params.id as string);
	const workHref = () => getAssignmentWorkHref(params.id as string);
	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>
				{props.showWork !== false ? (
					<A href={workHref()} class={`${styles.tabLink} ${isWork() ? styles.tabLinkActive : ""}`.trim()}>
						Work
					</A>
				) : null}
			</div>
		</nav>
	);
};

export default AssignmentTabs;
