import { Events, Complements } from "../../../index";

export default function Scope1({ title, scope }: Scope.Scope1) {
    return (
        <section className="p-5 text-center m-auto">
            {title && <h2 className="darkTitle">{title}</h2>}
            <div className="py-6">
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {scope.map((item) => (
                        <div
                            key={`${Events.Utils.slugify(item.title)}`}
                            className={`hover:-mt-3 transition-all hover:shadow-lg rounded shadow p-8 darkContainer ${item.className}`}
                        >
                            {item.img && (
                                <img
                                    src={item.img}
                                    alt={item.alt}
                                    loading="lazy"
                                    className="m-auto w-[50px] h-[50px] mb-4"
                                />
                            )}
                            <h3 className="darkTitle">{item.title}</h3>
                            <Complements.Child
                                name={item.title}
                                item={item.text}
                                className="my-3"
                            />
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}