"use client";

import { ArrowRight, ExternalLink } from "lucide-react";

declare global {
  interface Window {
    rybbit?: {
      event?: (name: string, properties?: Record<string, string | number>) => void;
    };
  }
}

type TrackedPublicAuditLinkProps = {
  href: string;
  label: string;
  domain: string;
};

export function TrackedPublicAuditLink({
  href,
  label,
  domain,
}: TrackedPublicAuditLinkProps) {
  const isInternal = href.startsWith("/");

  return (
    <a
      href={href}
      className="mt-6 inline-flex h-10 items-center justify-center gap-2 rounded-lg bg-slate-950 px-4 text-sm font-semibold text-white transition hover:bg-slate-800 md:mt-0"
      onClick={() => {
        window.rybbit?.event?.("audit_cta_click", {
          domain,
          target: isInternal ? "cta" : "outbound_cta",
        });
        if (!isInternal) {
          window.rybbit?.event?.("audit_website_link_click", {
            domain,
            href,
          });
        }
      }}
    >
      {label}
      {isInternal ? (
        <ArrowRight className="h-4 w-4" aria-hidden />
      ) : (
        <ExternalLink className="h-4 w-4" aria-hidden />
      )}
    </a>
  );
}