import styles from "./index.module.css";

type Props = {
    items: {
        title: string;
        content: string;
        backgroundImage: string;
    }[];
}

export default function ColumnXGrids({ items }: Props) {
    return (
        <div className={styles.columnXGrids}>
            {items.map((item, index) => (
                <div key={index} className={styles.columnXGridsItem} style={{ backgroundImage: `url(${item.backgroundImage})` }}>
                    <div className={styles.mask}></div>
                    <div className={styles.columnXGridsItemInner}>
                        <div className={styles.columnXGridsItemTitle}>{item.title}</div>
                        <div className={styles.columnXGridsItemContent}>{item.content}</div>
                    </div>
                </div>
            ))}
        </div>
    )
}