"use client";

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

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} />
            ))}
          </div>
        </div>
      </section>
    </BackgroundWrapper>
  );
};

export default BookmarkPage;