"use client";
import React, { Suspense, useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import axios from "axios";
import Calendar from "./Calender";
import Image from "next/image";
import logo from "../../../public/books.png"; 
import Link from "next/link";
import { useSession } from "next-auth/react";

const Dashboard: React.FC = () => {
  const { data: session } = useSession();
  const username = session?.user?.username || "";
  const [currentStreak, setCurrentStreak] = React.useState(0);
  const [longestStreak, setLongestStreak] = React.useState(0);
  const searchParams = useSearchParams();
  useEffect(() => {
    async function fetchData() {
      const result = await axios.get("/api/dashboard/akash");
      console.log(result.data);
      setCurrentStreak(result.data.currentStreak);
      setLongestStreak(result.data.longestStreak);
    }
    fetchData();
  }, [currentStreak, longestStreak]);

  return (
    <div className="sm:grid sm:grid-rows-12 ">
      <div className="sm:hidden flex justify-between px-5 py-3 bg-white w-full border-b ">
        <Link href={"/dashboard"}>
          <div className="flex justify-around sm:mb-20  px-5 ">
            <Image className="w-8 h-8" src={logo} alt="logo" />
          </div>
        </Link>
        <h1 className="pt-1 text-lg">{username}</h1>
      </div>
      <div className="grid sm:grid-cols-3 sm:justify-between  sm:row-span-1 sm:w-auto w-full ">
        <div className=" p-5 ">current streak:11</div>
        <div className=" p-5 ">longest streak:123</div>
      </div>
      {/* <div className="p-5 rounded-lg row-span-1">Suggestions:🌇</div> */}
      <div className=" sm:grid sm:grid-cols-6 sm:p-2 p-5">
        <Suspense fallback={<div>Loading Calendar...</div>}>
          <Calendar searchParams={searchParams} />
        </Suspense>
      </div
    </div>
  );
};

export default Dashboard;