chore: refactor code for type safety

components/Header.tsx

@@ -1,33 +1,27 @@
 import React, { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
-import Image from "next/image";
 import { ChevronLeft, Layers } from "lucide-react";
 import { useTimer } from "@/context/TimerContext";
 import styles from "@/css/Header.module.css";
 import { useExam } from "@/context/ExamContext";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { useModal } from "@/context/ModalContext";
+import { API_URL, getToken } from "@/lib/auth";
+import { UserData } from "@/types/auth";
 
-const API_URL = "https://examjam-api.pptx704.com";
-
-// You'll need to implement getToken for Next.js - could use cookies, localStorage, etc.
-const getToken = async () => {
-  if (typeof window === "undefined") {
-    return null;
-  }
-
-  // Extract authToken from cookies
-  const match = document.cookie.match(/(?:^|;\s*)authToken=([^;]*)/);
-  return match ? decodeURIComponent(match[1]) : null;
-};
+interface HeaderProps {
+  displayUser?: boolean;
+  displaySubject?: string;
+  displayTabTitle: string;
+  examDuration?: string;
+}
 
 const Header = ({
-  image,
   displayUser,
   displaySubject,
   displayTabTitle,
   examDuration,
-}) => {
+}: HeaderProps) => {
   const router = useRouter();
   const { open } = useModal();
   const { clearExam } = useExam();
@@ -35,7 +29,7 @@ const Header = ({
     examDuration ? parseInt(examDuration) * 60 : 0
   );
   const { timeRemaining, stopTimer } = useTimer();
-  const [userData, setUserData] = useState(null);
+  const [userData, setUserData] = useState<UserData>();
 
   useEffect(() => {
     if (!examDuration) return;