import type { Component } from "solid-js";
import { For, Show } from "solid-js";
import type { AssignmentPageData } from "./assignment.data";
import styles from "./assignment-question-list.module.scss";

type Props = {
	data: AssignmentPageData;
};

const AssignmentQuestionList: Component<Props> = (props) => {
	return (
		<section class={styles.section}>
			<div class={styles.header}>
				<h2>Sample questions</h2>
				<p>{props.data.questions.length} loaded from the mock dataset</p>
			</div>

			<div class={styles.list}>
				<For each={props.data.questions}>
					{(question) => (
						<article class={styles.card}>
							<div class={styles.cardTop}>
								<div>
									<p class={styles.order}>Question {question.order}</p>
									<h3>{question.prompt}</h3>
								</div>
								<span classList={{ [styles.statusPill]: true, [styles[question.statusTone]]: true }}>{question.statusLabel}</span>
							</div>

							<div class={styles.metaRow}>
								<span>{question.topic}</span>
								<Show when={question.subTopic}>
									<span>{question.subTopic}</span>
								</Show>
								<span>{question.difficulty}</span>
								<span>{question.marks} mark</span>
								<Show when={question.solveModeLabel}>
									<span>{question.solveModeLabel}</span>
								</Show>
							</div>

							<div class={styles.responseBlock}>
								<p>{question.responseLabel}</p>
								<strong>{question.responseValue}</strong>
								<span>{question.feedback}</span>
							</div>

							<Show when={question.showAnswerKey}>
								<div class={styles.answerKey}>
									<p>Answer key</p>
									<strong>{question.correctAnswer}</strong>
								</div>
							</Show>
						</article>
					)}
				</For>
			</div>
		</section>
	);
};

export default AssignmentQuestionList;
