"use client"

import * as React from "react";
import { cn } from "@/lib/utils";
import { Github } from "lucide-react";
import { useGitHubStars } from "@/hooks/use-github-stars";
import { formatCount } from "@/lib/format-count";

interface GitHubStarButtonProps {
  repo?: string;
  className?: string;
}

const GitHubStarButton = React.forwardRef<HTMLAnchorElement, GitHubStarButtonProps>(
  ({ repo = "phact/openrag", className }, ref) => {
    const { data, isLoading, error } = useGitHubStars(repo);

    return (
      <a
        ref={ref}
        href={`https://github.com/${repo}`}
        target="_blank"
        rel="noopener noreferrer"
        className={cn(
          "inline-flex h-8 items-center justify-center rounded-md px-2 text-sm font-medium text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
          className
        )}
      >
        <Github className="h-4 w-4" />
        <span className="hidden sm:inline ml-2">
          {isLoading ? "..." : error ? "--" : data ? formatCount(data.stargazers_count) : "--"}
        </span>
      </a>
    );
  }
);

GitHubStarButton.displayName = "GitHubStarButton";

export { GitHubStarButton };