GitHub Stars

"use client";

import { Button } from "@/components/ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";
import { Star } from "lucide-react";

interface GitHubStarsProps {
  repo;
  initialStars?: number;
  className?;
  size?: "sm" | "md" | "lg";
}

function formatFullNumber(num: number) {
  return new Intl.NumberFormat("en-US").format(num);
}

export function GitHubStars({ 
  repo, 
  initialStars = 0, 
  className,
  size = "sm"
}: GitHubStarsProps) {
  const [stars, setStars] = useState(initialStars);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(initialStars === 0);

  useEffect(() => {
    if (initialStars > 0) return;

    const fetchStars = async () => {
      try {
        const res = await fetch(`https://api.github.com/repos/${repo}`);
        if (!res.ok) throw new Error(`GitHub API error: ${res.status}`);
        const data = await res.json();
        setStars(data.stargazers_count || 0);
      } catch (err) {
        console.error("Failed to fetch GitHub stars:", err);
        setError("Failed to load");
      } finally {
        setLoading(false);
      }
    };

    fetchStars();
  }, [repo, initialStars]);

  const formattedCompact = new Intl.NumberFormat("en-US", {
    notation: "compact",
    compactDisplay: "short",
    maximumFractionDigits: 1,
  }).format(stars).toLowerCase();

  const sizeClasses = {
    sm: "h-8 px-2.5 text-xs",
    md: "h-9 px-3 text-sm",
    lg: "h-10 px-4 text-sm"
  };

  const ButtonContent = (
    <Button
      className={cn(
        "flex items-center gap-1.5 font-medium transition-all",
        sizeClasses[size],
        className
      )}
      size={size}
      asChild
    >
      <a
        href={`https://github.com/${repo}`}
        target="_blank"
        rel="noopener noreferrer"
        aria-label={`Star ${repo} on GitHub`}
      >
        <Star className={cn(
          "fill-current",
          size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4"
        )} />
        <span className="tabular-nums">
          {loading ? "—" : formattedCompact}
        </span>
      </a>
    </Button>
  );

  return (
    <TooltipProvider>
      <Tooltip delayDuration={200}>
        <TooltipTrigger asChild>
          {ButtonContent}
        </TooltipTrigger>
        <TooltipContent side="top" className="font-sans">
          <div className="flex flex-col gap-1">
            <span className="font-medium">
              {formatFullNumber(stars)} stars on GitHub
            </span>
            {error && (
              <span className="text-xs text-red-400">{error}</span>
            )}
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}