"use client";
import React, { useState } from "react";
import { useRouter } from "next/navigation";
import Navbar from "../../components/navbar";

export default function Dashboard() {
  const [isAddingCard, setIsAddingCard] = useState(false);
  const router = useRouter();

  const handleRedirect = () => {
    setIsAddingCard(true);
    // Redirect to the page where users can add or manage flashcards
    router.push("/uploadFiles");
    setIsAddingCard(false);
  };

  return (
    <main className="bg-gradient">
      <Navbar />
      <section className="pt-16 px-4 relative ">
        <h1 className="text-4xl font-bold text-center text-black mb-8">Your Flashcards</h1>
        <div className="flex flex-wrap gap-4 justify-center">
        </div>
        <div className="pt-72">
          <button
            onClick={handleRedirect}
            className="absolute bottom-4 left-1/2 transform -translate-x-1/2 w-12 h-12 bg-black text-white rounded-full flex items-center justify-center shadow-lg hover:bg-gray-800 transition"
            aria-label="Add flashcard"
            disabled={isAddingCard}
          >
            {isAddingCard ? (
              <span>...</span>
            ) : (
              <span className="text-2xl">+</span>
            )}
          </button>
        </div>
      </section>
    </main>
  );
}