"use client";

import { ReactElement, useEffect, useState } from "react";
import { Star } from "lucide-react";
import Link from "next/link";
import { cn } from "@/app/common/utils";

type GithubStarProps = {
  /**
   * The class name for this component.
   */
  className?: string;
};

export function GithubStar({ className }: GithubStarProps): ReactElement {
  const [starCount, setStarCount] = useState(0);

  const getStarCount = async () => {
    const res = await fetch("https://api.github.com/repos/RealFascinated/MinecraftUtilities");
    const data = await res.json();
    return data.stargazers_count;
  };

  useEffect(() => {
    getStarCount().then(setStarCount);
  }, []);

  return (
    <Link
      className={cn(
        "bg-github-green px-2 py-1 rounded-lg items-center gap-1 hover:opacity-85 transform-gpu transition-all hidden md:flex",
        className,
      )}
      href="https://github.com/RealFascinated/MinecraftUtilities"
      target="_blank"
    >
      <p className="text-white text-sm bg-github-green-accent py-[3px] px-[4px] rounded-lg leading-none">{starCount}</p>
      <Star size={18} />
      <p className="text-white text-sm leading-none">Star us!</p>
    </Link>
  );
}