import { NavLink } from "react-router-dom"
import { useState, useEffect } from 'react';
import Aos from "aos";
import "aos/dist/aos.css";
interface Properties {
  heading: string;
  image1: string;
  image2: string;
  content: string; 
  call_to_action_link: string; 
  call_to_action: string; 
}
interface  Props { 
  apiUrl: string;
}
const AboutSection = ({ apiUrl }: Props) => { 
    useEffect(() => {
        Aos.init({
            duration: 1000,
            once: true,
        });
    }, []);
        const [properties, setProperties] = useState<Properties | null>(null);
        const [loading, setLoading] = useState(true);
        
        useEffect(() => {
            const fetchProperties = async () => {
                try {
                    const response = await fetch(apiUrl);
                    const data = await response.json();
                    setProperties(data); // Assuming the data is in the expected format
                    setLoading(false);
                } catch (error) {
                    console.error("Error fetching properties:", error);
                    setLoading(false);
                }
            };
    
            fetchProperties();
        }, [apiUrl]);
        if (loading || !properties) return null;
  return (
      <section id="about" className="about-sec1 section pt-5 the-about-fluid justify">
      <div className="container pt-lg-5 text-left">
        <div className="row">
          <div
            className="col-lg-5 pe-lg-5"
            data-aos="fade-right"
            data-aos-delay="400"
          >
            <h4 className="fs-1 mb-3 heading-primary-text dark-bg-light">
              {properties?.heading}
            </h4>
            <div dangerouslySetInnerHTML={{ __html: properties?.content }} />

            <NavLink to={properties?.call_to_action_link} className="btn btn-lg btn-dark fs-6 mt-4"
              data-aos="fade-right"
              data-aos-delay="900">{properties?.call_to_action}</NavLink>
             
          </div>

          <div
            className="col-lg-3 ps-lg-5"
            data-aos="zoom-in"
            data-aos-delay="400"
          >
            <img
              src={properties?.image1}
              className="img-fluid rounded-4"
              alt="About section small"
            />
          </div>

          <div
                      className="col-lg-4 ps-lg-15"
            data-aos="zoom-in"
            data-aos-delay="550"
          >
            <div className="content">
              <img
                src={properties?.image2}
                className="img-fluid rounded-4"
                alt="About section large"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default AboutSection;
