import { useState } from "react";
import { useEffect } from "react";
import { renderSpanHTML } from "@/service/AdvancedFieldService";

export default function ContactSection({ settings, data, success }: { settings: any, data: any, success: string | null }) {
  
  const [localSuccess, setLocalSuccess] = useState<string | null>(null);
  useEffect(() => {
    setLocalSuccess(success ?? null);
  }, [success]);

  useEffect(() => {
    if (!localSuccess) return;

    const timer = setTimeout(() => {
      setLocalSuccess(null);
    }, 5000);

    return () => clearTimeout(timer);
  }, [localSuccess]);

  useEffect(() => {
    console.log(settings);
  }, [settings]);


  return (
    <section id="contact" className="bg-white py-10 pb-16">
      <div className="w-full max-w-[1400px] mx-auto px-2 md:px-4">
        <h2 className="text-xl font-semibold text-slate-900 md:text-3xl">{data.sec_5_title}</h2>
        {localSuccess && (
              <div className="mb-6 rounded-lg bg-green-100 border border-green-300 px-6 py-4 text-green-800 text-base font-medium shadow-md text-center">
                {localSuccess}
              </div>
          )}
        {renderSpanHTML(settings.sec_5_form)}
      </div>
    </section>
  );
}