import   { useEffect, useState } from 'react';

interface Service {
  title: string;
  image: string;
  alt: string;
  items: string[];
}
interface Props {
    apiUrl: string;
}

const AboutService = ({ apiUrl }: Props) => { 
    
  const [services, setServices] = useState<Service[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchServices = async () => {
      try {
          const response = await fetch(apiUrl); // Replace with your actual endpoint
        const data = await response.json();
        setServices(data);
      } catch (error) {
        console.error('Failed to fetch services:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchServices();
  }, []);

  if (loading) return <div>Loading...</div>;

  return (
    <section className="about__services-wrapper pb-4 pt-32 tablet:pb-20 tablet:pt-40">
      <div className="container" style={{ maxWidth: '1313px' }}>
        <h2 className="mb-8 text-center text-white tablet:mb-20">OUR SERVICES</h2>
        <div className="about__services">
          {services.map((service, index) => (
            <div className="about__services-item" key={index}>
              <div className="about__services-item__img">
                <img
                  src={service.image}
                  alt={service.alt}
                  loading="lazy"
                  className="about__services-item__img-inner"
                  style={{ visibility: 'visible' }}
                />
              </div>
              <div className="about__services-item__text">
                <div className="about__services-item__text-inner">
                  <h3 className="mb-6 text-2xl xlPc:text-4xl heading-primary-text dark-bg-light">{service.title}</h3>
                  <ul className="text-base font-thin xlPc:text-2xl" role="list">
                    {service.items.map((item, idx) => (
                      <li className="services__item-li" key={idx}>
                        {item}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default AboutService;
