import ScrollReveal from '@/components/ScrollReveal';
import styles from './index.module.css';

type Data = {
    title: string;
    backgroundImage: string;
    items: {
        largeTitle: string;
        title: string;
    }[];
}
export default function HonorGrids({ data }: { data: Data }) {
    return (
        <section className={styles.honorGrids} style={{ backgroundImage: `url(${data.backgroundImage})` }}>
            <div className={styles.honorGridsTitle}>{data.title}</div>

            <div className={styles.honorGridsItems}>
                {data.items.map((item, index) => (
                    <ScrollReveal preset="slideUp" amount={0.2} delay={index * 0.2}>
                    <div className={styles.honorGridsItem} key={item.title}>
                        <div className={styles.honorGridsItemBgleft}
                            style={{ backgroundImage: "url(/images/icons/honor-left.png)" }}
                        ></div>
                        <div className={styles.honorGridsItemLargeTitle}>{item.largeTitle}</div>
                        <div className={`${styles.honorGridsItemTitle} ${styles.honorGridsItemLargeTitle ? styles.honorGridsItemLargeTitleContent : ""}`}>{item.title}</div>
                        <div className={styles.honorGridsItemBgright}
                            style={{ backgroundImage: "url(/images/icons/honor-right.png)" }}
                        ></div>
                    </div>
                    </ScrollReveal>
                ))}
            </div>
        </section>
    )
}