"use client";

import { useCallback, useState } from "react";
import { ArrowRight, Handshake } from "lucide-react";
import { usePathname } from "next/navigation";

import DemoModal from "@/components/demo/DemoModal";
import type { Locale } from "@/lib/locales";
import { inferProductSlug } from "@/lib/product-map";
import type { ProductSlug } from "@/lib/routes";

export default function DemoButton({
  className,
  icon = "arrow",
  label,
  locale,
  onOpen,
  productSlug,
}: {
  className: string;
  icon?: "arrow" | "handshake" | "none";
  label: string;
  locale: Locale;
  onOpen?: () => void;
  productSlug?: ProductSlug;
}) {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);
  const resolvedProductSlug = productSlug ?? inferProductSlug(pathname);
  const close = useCallback(() => setOpen(false), []);
  function showModal() {
    onOpen?.();
    setOpen(true);
  }
  return (
    <>
      <button type="button" onClick={showModal} className={className}>
        {icon === "handshake" ? <Handshake size={17} /> : null}
        {label}
        {icon === "arrow" ? <ArrowRight size={15} /> : null}
      </button>
      <DemoModal locale={locale} onClose={close} open={open} productSlug={resolvedProductSlug} />
    </>
  );
}