/* eslint-disable @next/next/no-img-element */
import Head from "next/head";
import UserResultChart from "@/components/UserResultChart";
import Navbar from "@/components/Navbar";
import Icon from "@mdi/react";
import {mdiPlus} from "@mdi/js";
import Link from "next/link";
import clsx from "clsx";
import {infoButtonStyle} from "@/constants/buttonStyles";
import ProfileCard from "@/components/ProfileCard";

// TODO: Remove this import
import JSON_RESULTS from "@/demo/user_results.json";
import JSON_USER from "@/demo/user.json";

export default function Home() {
	return (
		<>
			<Head>
				<title>IELTS GPT | Muscat Training Institute</title>
				<meta
					name="description"
					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
				/>
				<meta name="viewport" content="width=device-width, initial-scale=1" />
				<link rel="icon" href="/favicon.ico" />
			</Head>
			<main className="w-full h-screen flex flex-col items-center bg-neutral-100">
				<Navbar profilePicture={JSON_USER.profilePicture} />
				<div className="w-full h-full p-4 relative">
					<Link href="/exam">
						<button className={clsx("btn gap-2 top-12 right-12 absolute", infoButtonStyle)}>
							<Icon path={mdiPlus} color="white" size={1} />
							New Exam
						</button>
					</Link>
					<section className="h-full w-full flex items-center p-8 gap-12 justify-center">
						<section className="w-1/2 h-full flex items-center">
							<ProfileCard user={JSON_USER} className="text-black self-start" />
						</section>
						<section className="w-1/2 h-full flex items-center justify-center">
							<UserResultChart results={JSON_RESULTS} resultKey="total" label="Total exams" className="w-2/3" />
						</section>
					</section>
				</div>
			</main>
		</>
	);
}
