import { Cache } from "mcutils-library";
import React, { ReactElement, ReactNode } from "react";
import { Popover, PopoverContent, PopoverTrigger } from "@/app/components/ui/popover";
import moment from "moment";

type CacheInformationProps = {
  cache: Cache;
  children?: ReactNode;
};

export function CacheInformation({ cache, children }: CacheInformationProps): ReactElement {
  const isCached = cache.cached;
  const cacheTime = cache.cachedTime;

  return (
    <Popover>
      <PopoverTrigger asChild>{children}</PopoverTrigger>
      <PopoverContent>
        <p className={isCached ? "text-green-400" : "text-red-400"}>{isCached ? "Cached" : "Not Cached"}</p>
        {cacheTime !== -1 && <p>{moment(cacheTime).calendar()}</p>}
      </PopoverContent>
    </Popover>
  );
}