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

export default function Scope2({ scope }: Scope.Scope1) {
    function handleMouseOver(id: string) {
        const element = document.getElementById(id) as HTMLElement;
        element.classList.remove("text-white");
        element.classList.add("titleColor");
    }

    function handleMouseLeave(id: string) {
        const element = document.getElementById(id) as HTMLElement;
        element.classList.remove("titleColor");
        element.classList.add("text-white");
    }

    return (
        <section className="grid grid-cols-1 md:grid-cols-2 p-6 gap-6 text-center">
            {scope.map((item, index) => (
                <div
                    key={`key-scp1-${Events.Utils.slugify(item.title)}`}
                    className={`p-7 transition-colors shadow rounded text-white hover:bg-white textHover darkContainer darkContainerHoverAlt ${item.className}`}
                    onMouseOver={() => handleMouseOver(`scp2-${index}`)}
                    onMouseLeave={() => handleMouseLeave(`scp2-${index}`)}
                >
                    <h3
                        id={`scp2-${index}`}
                        className={`uppercase text-white darkTitle`}
                    >
                        {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>
            ))}
        </section>
    );
}