"use client";

import { FormBlock } from "@/components/blocks/Form";
import { useFormQuery } from "@/services/hooks/form";
import { useEffect } from "react";
import Loader from "./loaders/Loader";

export default function ContactFormSection() {
  const form = useFormQuery();

  useEffect(() => {
    form._fetch(1);
  }, []);

  return (
    <div className="box-1-cell height-fill context-dark bg-colorContactForm! z-20!">
      {form.isFetching && (
        <div className="my-16">
          <Loader />
        </div>
      )}

      {!form.isFetching && (
        <div className="cell-inner box-1-outer">
          <div className="box-1">{!form.isFetching && !!form.data && <FormBlock form={form.data} />}</div>
        </div>
      )}
    </div>
  );
}
