"use client";

import React from "react";
import BackgroundWrapper from "@/components/BackgroundWrapper";
import { ListFilter, MoveLeft } from "lucide-react";
import { useRouter } from "next/navigation";
import DestructibleAlert from "@/components/DestructibleAlert";

// interface Question {
//   id: number;
//   question: string;
//   options: Record<string, string>;
// }

// interface QuestionItemProps {
//   question: Question;
// }

// const QuestionItem = ({ question }: QuestionItemProps) => {
//   const [bookmark, setBookmark] = useState(true);
//   return (
//     <div className="border border-[#8abdff]/50 rounded-2xl p-4 flex  flex-col gap-7">
//       <h3 className="text-xl font-medium">
//         {question.id + 1}. {question.question}
//       </h3>
//       <div className="flex justify-between items-center">
//         <div></div>
//         <button onClick={() => setBookmark(!bookmark)}>
//           {bookmark ? (
//             <BookmarkCheck size={25} color="#113768" />
//           ) : (
//             <Bookmark size={25} color="#113768" />
//           )}
//         </button>
//       </div>
//       <div className="flex flex-col gap-4 items-start">
//         {Object.entries(question.options).map(([key, value]) => {
//           return (
//             <div key={key} className="flex items-center gap-3">
//               <span className="px-2 py-1 flex items-center rounded-full border font-medium text-sm">
//                 {key.toUpperCase()}
//               </span>
//               <span className="option-description">{value}</span>
//             </div>
//           );
//         })}
//       </div>
//     </div>
//   );
// };

const BookmarkPage = () => {
  const router = useRouter();
  // const [questions, setQuestions] = useState<Question[]>([]);

  // useEffect(() => {
  //   fetch("/data/bookmark.json")
  //     .then((res) => res.json())
  //     .then((data) => setQuestions(data))
  //     .catch((err) => console.error("Error loading questions: ", err));
  // }, []);

  return (
    <BackgroundWrapper>
      <section className="min-h-screen flex flex-col justify-between">
        <div className="flex-1 mb-20">
          <div className="mx-8 mt-10 pb-6 space-y-6">
            <button onClick={() => router.push("/home")}>
              <MoveLeft size={30} color="#113768" />
            </button>
            <h1 className="text-4xl font-semibold text-[#113768]">Bookmark</h1>
            <div className="flex justify-between">
              <h3 className="text-xl font-semibold text-[#113768]">Recent</h3>
              <button>
                <ListFilter size={24} color="#113768" />
              </button>
            </div>
            {/* {questions.map((question: Question) => (
              <QuestionItem key={question.id} question={question} />
            ))} */}
            <DestructibleAlert
              text="Page under construction"
              variant="warning"
            />
          </div>
        </div>
      </section>
    </BackgroundWrapper>
  );
};

export default BookmarkPage;