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

function Element({
    data,
    className,
    transition,
}: {
    data: Testimony.Testimony1;
    className: string;
    transition?: boolean;
}) {
    const dataRef = useRef<HTMLDivElement>(null);
    const useTransition = transition
        ? Events.Hooks.useTransitionUp(dataRef)
        : null;

    return (
        <div
            ref={dataRef}
            key={`key-testimony1-${data.alt.replace(/\s+/g, "-")}`}
            className={`rounded shadow p-8 darkContainer ${className} ${useTransition}`}
        >
            {data.img && (
                <picture>
                    <source
                        srcSet={data.responsive || data.img}
                        media="(max-width: 767px)"
                    />
                    <source srcSet={data.img} media="(min-width: 768px)" />
                    <img
                        src={data.img}
                        alt={data.alt}
                        loading="lazy"
                        className="w-[100px] h-[100px] object-cover rounded-full m-auto mb-4"
                    />
                </picture>
            )}
            <blockquote>
                <Complements.Child
                    item={data.text}
                    name={data.alt}
                    className="mb-4 text-sm"
                />
            </blockquote>
            <cite className="text-sm italic text">{data.author}</cite>
        </div>
    );
}

export default function Testimony1({
    data,
    className,
    transition,
}: {
    data: Testimony.Testimony1[];
    className: string;
    transition?: boolean;
}) {
    return (
        <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 p-4 gap-6 text-center">
            {data.map((item) => (
                <Element
                    className={className}
                    transition={transition}
                    data={item}
                />
            ))}
        </section>
    );
}