import {Tab} from "@headlessui/react";
import clsx from "clsx";
import ExamList from "./ExamList";
import UserList from "./UserList";

export default function Lists() {
	return (
		<Tab.Group>
			<Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
				<Tab
					className={({selected}) =>
						clsx(
							"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
							"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
							"transition duration-300 ease-in-out",
							selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
						)
					}>
					User List
				</Tab>
				<Tab
					className={({selected}) =>
						clsx(
							"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
							"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
							"transition duration-300 ease-in-out",
							selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
						)
					}>
					Exam List
				</Tab>
			</Tab.List>
			<Tab.Panels className="mt-2">
				<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide shadow">
					<UserList />
				</Tab.Panel>
				<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide shadow">
					<ExamList />
				</Tab.Panel>
			</Tab.Panels>
		</Tab.Group>
	);
}