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";
import { useQuota } from "muzak/contexts/QuotaContext";
const nunito = Nunito({
  subsets: ["latin"],
});

export default function Quota() {
  const auth = useAuth();
  const { quota, setQuota } = useQuota();
  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>
    );
  }
}
