"use client";

import { usePathname } from "next/navigation";
import { MailIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
  TooltipProvider,
} from "@/components/ui/tooltip";
import { useLocaleFunction } from "@/hooks/use-localed";
import { isExamContentPage } from "@/lib/utils";

export default function ContactUs() {
  const pathname = usePathname();
  const isExamPage = isExamContentPage(pathname);
  const t = useLocaleFunction();

  return (
    <>
      {!isExamPage && (
        <div className="fixed bottom-20 right-[34px] z-50">
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  variant="default"
                  size="icon"
                  className="h-10 w-10 rounded-full shadow-lg hover:scale-110 transition-transform [&_svg]:size-6"
                  asChild
                >
                  <a href="mailto:tidb_labs@pingcap.com" aria-label="Contact us">
                    <MailIcon />
                  </a>
                </Button>
              </TooltipTrigger>
              <TooltipContent side="left" className="max-w-60">
                <p className="text-sm">{t("lab.alerts.contact-us", 'tidb_labs@pingcap.com')}</p>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        </div>
      )}
    </>
  )
}