import Link from "next/link";
import { useAuth } from "react-oidc-context";
import { useEffect, useState } from "react";
import { Nunito } from "next/font/google";
import { api, Profile } from "muzak/data/fetcher";
const nunito = Nunito({
  subsets: ["latin"],
});

export default function Quota({
  quota,
  setQuota,
}: {
  quota: number | null;
  setQuota: React.Dispatch<React.SetStateAction<number | null>>;
}) {
  const auth = useAuth();
  async function getProfile() {
    if (!auth.isLoading && !auth.error && auth.isAuthenticated) {
      const { data: profile } = await api?.profiles?.me({});
      setQuota((profile as Profile)?.quota);
    }
  }
  useEffect(() => {
    getProfile();
  }, [auth]);

  if (!auth.isLoading && !auth.error && auth.isAuthenticated) {
    return (
      <h1
        className={`${nunito.className} text-outline absolute right-0 bottom-0 p-6 text-[42px] font-bold tracking-tighter text-yellow-500`}
      >
        {quota}
      </h1>
    );
  }
}