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";

const DEFAULT_STREAM_DEMO_PRODUCTS = ["Удаленная демонстрация"] as Product[];

export function Feedback() {
  useAddReferer();

  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]">Хотите увеличить конверсию?</span>
        <br />
        Давайте обсудим детали.
      </h2>
      <FeedbackForm />
    </div>
  );
}

export function FeedbackForm() {
  const { setModal } = useModalStore();

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