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

export default function Scope1({ title, scope }: Scope.Scope1) {
    return (
        <section className="text-center py-6 md:w-11/12 md:m-auto">
            {title && <h2 className="darkTitle">{title}</h2>}
            <div className="text-center py-6">
                {scope.map((item) => (
                    <div
                        key={`key-scp1-${item.title}`}
                        className="rounded shadow w-auto p-10 darkContainer"
                    >
                        {item.img && (
                            <img
                                src={item.img}
                                alt={item.alt}
                                className="m-auto w-[60px] h-[60px] mb-2"
                            />
                        )}
                        <h3 className="darkTitle mb-5">{item.title}</h3>
                        <Complements.Child
                            name={item.title}
                            item={item.text}
                            className="my-3"
                        />
                        {item.button && (
                            <Button.Button1
                                name={item.button.name}
                                href={item.button.href}
                                ariaLabel={item.button.ariaLabel}
                                rel={item.button.rel || "tag"}
                                id={item.button.id}
                                className={`${item.button.className}`}
                                type={item.button.type || "button"}
                                target={item.button.target || "_self"}
                            />
                        )}
                    </div>
                ))}
            </div>
        </section>
    );
}