encoach_frontend/src/components/Medium/ModuleLevelSelector.tsx

import {Module} from "@/interfaces";
import {writingMarking} from "@/utils/score";
import {Menu} from "@headlessui/react";
import {Dispatch, SetStateAction} from "react";
import {BsBook, BsChevronDown, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";

type Levels = {[key in Module]: number};

interface Props {
	levels: Levels;
	setLevels: Dispatch<SetStateAction<Levels>>;
}

export default function ModuleLevelSelector({levels, setLevels}: Props) {
	return (
		<div className="flex flex-col gap-32 w-full">
			<div className="grid grid-cols-1 md:grid-cols-2 gap-y-4 gap-x-16">
				<div className="w-full flex flex-col gap-3.5 relative">
					<span className="text-sm text-mti-gray-dim">
						<span className="font-bold">Reading</span> level
					</span>
					<Menu>
						<Menu.Button className="w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-between items-center gap-12 bg-white">
							<BsBook className="text-ielts-reading" size={34} />
							<span className="text-mti-gray-cool text-sm">
								{levels.reading === -1 ? "Select your reading level" : `Level ${levels.reading}`}
							</span>
							<BsChevronDown className="text-mti-gray-cool" size={12} />
						</Menu.Button>
						<Menu.Items className="absolute overflow-y-scroll scrollbar-hide max-h-[230px] origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl">
							{Object.values(writingMarking).map((x) => (
								<Menu.Item key={x}>
									<span
										onClick={() => setLevels((prev) => ({...prev, reading: x}))}
										className="w-full py-4 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
										Level {x}
									</span>
								</Menu.Item>
							))}
						</Menu.Items>
					</Menu>
				</div>
				<div className="w-full flex flex-col gap-3.5 relative">
					<span className="text-sm text-mti-gray-dim">
						<span className="font-bold">Listening</span> level
					</span>
					<Menu>
						<Menu.Button className="w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-between items-center gap-12 bg-white">
							<BsHeadphones className="text-ielts-listening" size={34} />
							<span className="text-mti-gray-cool text-sm">
								{levels.listening === -1 ? "Select your listening level" : `Level ${levels.listening}`}
							</span>
							<BsChevronDown className="text-mti-gray-cool" size={12} />
						</Menu.Button>
						<Menu.Items className="absolute overflow-y-scroll scrollbar-hide max-h-[230px] origin-top top-full bg-white flex flex-col items-center w-full z-50 drop-shadow-lg rounded-2xl">
							{Object.values(writingMarking).map((x) => (
								<Menu.Item key={x}>
									<span
										onClick={() => setLevels((prev) => ({...prev, listening: x}))}
										className="w-full py-5 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
										Level {x}
									</span>
								</Menu.Item>
							))}
						</Menu.Items>
					</Menu>
				</div>
				<div className="w-full flex flex-col gap-3.5 relative">
					<span className="text-sm text-mti-gray-dim">
						<span className="font-bold">Writing</span> level
					</span>
					<Menu>
						<Menu.Button className="w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-between items-center gap-12 bg-white">
							<BsPen className="text-ielts-writing" size={34} />
							<span className="text-mti-gray-cool text-sm">
								{levels.writing === -1 ? "Select your writing level" : `Level ${levels.writing}`}
							</span>
							<BsChevronDown className="text-mti-gray-cool" size={12} />
						</Menu.Button>
						<Menu.Items className="absolute overflow-y-scroll scrollbar-hide max-h-[230px] origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl">
							{Object.values(writingMarking).map((x) => (
								<Menu.Item key={x}>
									<span
										onClick={() => setLevels((prev) => ({...prev, writing: x}))}
										className="w-full py-5 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
										Level {x}
									</span>
								</Menu.Item>
							))}
						</Menu.Items>
					</Menu>
				</div>
				<div className="w-full flex flex-col gap-3.5 relative">
					<span className="text-sm text-mti-gray-dim">
						<span className="font-bold">Speaking</span> level
					</span>
					<Menu>
						<Menu.Button className="w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-between items-center gap-12 bg-white">
							<BsMegaphone className="text-ielts-speaking" size={34} />
							<span className="text-mti-gray-cool text-sm">
								{levels.speaking === -1 ? "Select your speaking level" : `Level ${levels.speaking}`}
							</span>
							<BsChevronDown className="text-mti-gray-cool" size={12} />
						</Menu.Button>
						<Menu.Items className="absolute overflow-y-scroll scrollbar-hide max-h-[230px] origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl">
							{Object.values(writingMarking).map((x) => (
								<Menu.Item key={x}>
									<span
										onClick={() => setLevels((prev) => ({...prev, speaking: x}))}
										className="w-full py-5 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
										Level {x}
									</span>
								</Menu.Item>
							))}
						</Menu.Items>
					</Menu>
				</div>
			</div>
		</div>
	);
}