"use client";

import Container from "@/components/NAWebsite/Container";
import { useDetectSticky } from "@/utils/useDetectSticky";
import Link from "next/link";
import { FaGithub } from "react-icons/fa";
import { twMerge } from "tailwind-merge";
import ActionArrow from "../ActionArrow";

export default function VectorHeader() {
  const [isSticky, ref, setIsSticky] = useDetectSticky();
  return (
    <div
      className={twMerge(
        "sticky top-[-1px] z-[20] hidden border-b border-t border-white/10 transition-colors min-[1025px]:block",
        isSticky ? "bg-black" : "",
      )}
      ref={ref as any}
    >
      <Container>
        <div className="flex items-center justify-between">
          <div className="w-[200px]">
            <Link
              href="/"
              className="inline-block py-3 font-medium text-white transition-colors hover:text-brandRedLight"
            >
              Vector Search
            </Link>
          </div>
          <div className="-mx-2 flex gap-2">
            <Link
              href="/"
              className="px-2 py-3 text-brandRedLight"
              data-gtag="event:vector_search_header,name:overview,product_type:ai"
            >
              Overview
            </Link>
            <Link
              href="#pricing"
              className="px-2 py-3 text-white transition-colors hover:text-brandRedLight"
              data-gtag="event:vector_search_header,name:pricing,product_type:ai"
            >
              Pricing
            </Link>
            <Link
              href="https://github.com/pingcap/tidb-vector-python/tree/main/examples"
              target="_blank"
              rel="noopener noreferrer"
              className="group inline-flex items-center gap-x-1 px-2 py-3 text-white transition-colors hover:text-brandRedLight"
              data-gtag="event:vector_search_header,name:integrations,product_type:ai"
            >
              Integrations
              <ActionArrow />
            </Link>
            <Link
              href="https://docs.pingcap.com/tidbcloud/vector-search-overview"
              target="_blank"
              rel="noopener noreferrer"
              className="group inline-flex items-center gap-x-1 px-2 py-3 text-white transition-colors hover:text-brandRedLight"
              data-gtag="event:vector_search_header,name:docs,product_type:ai"
            >
              Docs
              <ActionArrow />
            </Link>
          </div>
          <div className="flex w-[250px] justify-end">
            <Link
              href="https://github.com/pingcap/tidb"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-1 px-2 py-3 text-white transition-colors hover:text-brandRedLight"
              data-gtag="event:go_to_github,gh_target:/pingcap/tidb,product_type:ai"
            >
              <FaGithub className="h-6 w-6" />
              <span>37.1k</span>
            </Link>
          </div>
        </div>
      </Container>
    </div>
  );
}