"use client";

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

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

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

  return (
    <div className="lg:w-1/3 box-1-cell height-fill hidden! lg:flex! context-dark bg-colorContactForm/80! z-20!">
      <div className="box-1-bg-shape">
        <img className="box-1-bg-image" src="images/bg-shape-1.png" alt="" role="presentation" />
      </div>
      <div className="cell-inner box-1-outer">
        <div className="box-1">{!form.isFetching && !!form.data && <FormBlock form={form.data} />}</div>
      </div>
    </div>
  );
}