import axios from "axios";
import Link from "next/link";
import {useRouter} from "next/router";

interface Props {
	profilePicture: string;
}

/* eslint-disable @next/next/no-img-element */
export default function Navbar({profilePicture}: Props) {
	const router = useRouter();

	const logout = async () => {
		axios.post("/api/logout").finally(() => {
			router.push("/login");
		});
	};

	return (
		<div className="navbar bg-neutral-100 drop-shadow-md text-black z-10">
			<div className="flex-1">
				<Link className="btn btn-ghost normal-case text-xl" href="/">
					IELTS GPT
				</Link>
			</div>
			<div className="flex-none gap-2">
				<div className="form-control">
					<input type="text" placeholder="Search" className="input input-bordered bg-white" />
				</div>
				<div className="dropdown dropdown-end">
					<label tabIndex={0} className="btn btn-ghost btn-circle avatar">
						<div className="w-10 rounded-full">
							<img src={profilePicture} alt="Profile picture" />
						</div>
					</label>
					<ul tabIndex={0} className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52">
						<li>
							<a className="justify-between">
								Profile
								<span className="badge">New</span>
							</a>
						</li>
						<li>
							<a>Settings</a>
						</li>
						<li>
							<a onClick={logout}>Logout</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	);
}