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




export default function ContactDetailsSection({ data, success }: { 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]);


  return (
    <section className="bg-white py-16 px-6 md:px-12 lg:px-24">
      <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16">
        
        {/* Left Side: Contact Information */}
        <div className="space-y-10">
        <h2 className="text-xl font-semibold text-slate-900 md:text-3xl">{data.sec_1_col_1_title}</h2>
          
          
          <div className="space-y-8">
            {data.sec_1_col_1_repeater.map((item: any, index: number) => (
              <div key={index} className="flex items-start gap-5">
                <div className="w-12 h-12 rounded-full bg-[#063b21] flex items-center justify-center text-white">
                  {renderSpanHTML(item.value_text_4)}
                </div>
                <div className="space-y-1">
                  <h3 className="text-xl font-medium text-[#1a1a1a]">{item.value_text_1}</h3>
                  <a href={item.value_text_3} target="_blank" className="text-lg text-gray-500">
                    <span dir={item.value_text_3.includes('tel:') ? 'ltr' : ''}>{item.value_text_2}</span>
                    
                  </a>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Right Side: Send Us a Message */}
        <div className="space-y-8">
          
          <h2 className="text-xl font-semibold text-slate-900 md:text-3xl">{data.sec_1_col_2_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(data.sec_1_col_2_form)}
        </div>

      </div>
    </section>
  );
}