import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import type { Product } from "@/types";
import useAddReferer from "@/hooks/useAddReferer";
import { useModalStore } from "@/stores/useModalStore";
import FeedbackModal from "@/components/modals/FeedbackFormModal";
import { LeadForm } from "@/features/lead-form/LeadForm";

export function Feedback() {
  useAddReferer();
  const { t } = useTranslation();

  return (
    <div
      id="contacts"
      className="lg:mb-20 md:mb-12 lg:flex lg:gap-[0.833vw] max-lg:space-y-12 justify-between lg:mt-[14.07vh] mt-[100px] mb-10"
    >
      <h2 className="line2 font-medium max-lg:mb-6 lg:max-w-[45%]">
        <span className="text-[#7A7A7A]">{t("feedback.titleLead")}</span>
        <br />
        {t("feedback.titleRest")}
      </h2>
      <FeedbackForm />
    </div>
  );
}

export function FeedbackForm() {
  const { t, i18n } = useTranslation();
  const { setModal } = useModalStore();

  const defaultProducts = useMemo(
    (): Product[] => [t("products.remoteDemo")],
    [t]
  );

  return (
    <div className="flex-1 space-y-4 lg:max-w-[47.431vw]">
      <div className="space-y-10">
        <LeadForm
          key={i18n.language}
          defaultProducts={defaultProducts}
          onSuccess={(id) => setModal(<FeedbackModal id={id} />)}
        />
      </div>
    </div>
  );
}
