import Image from "next/image";

async function GetServices() {
    const res = await fetch(`${process.env.BACKEND_URL}/services`, {
        cache: process.env.CACHE
    });

    if (!res.ok) {
        throw new Error("Erreur lors de la lecture des services du CV.")
    }
    return res.json();
}

export default async function Services() {
    const services = await GetServices();

    return (
        <section id="services" className="section">
            <div className="container">
                <h2 className="section-title">Services proposés</h2>
                <ul className="grid-3">
                    {services.map((service: any) => (
                        <li key={service.id} className="service-card card feature">
                            <div className="feature__icon" aria-hidden="true">
                                <Image
                                    src={service.img}
                                    alt={service.name}
                                    fill
                                    sizes="40px"
                                    style={{ objectFit: "cover" }}
                                />
                            </div>
                            <div>
                                <h3 className="feature__title">{service.name}</h3>
                                {"description" in service && service.description ? (
                                    <p className="u-muted">{service.description}</p>
                                ) : null}
                            </div>
                        </li>
                    ))}
                </ul>
            </div>
        </section>
    )
}