import React from "react";
import styles from "./index.css";
import {Scroll} from "../Animation/index";
const BgTextList = props=>{
    const {children,data = [],row = 2,...othprops} = props;
    return (
        <Scroll {...othprops} row={row} className={`${styles.Box} ${props.className}`}>
            {
                !!data.length && data.map((x,i)=>{
                    const value = (x.value+"").split("");
                    return( <div key={i} className={styles.li} style={{height:`calc(${100/row}% - 10px)`}}>
                        <h4>{x.name}</h4>
                        <p>
                            {
                                value.map((c,v)=>{
                                    return <span key={`${i}${v}`}>{c}</span>
                                })
                            }
                        </p>
                    </div>)
                })            
            }
        </Scroll>
    )
}
export {
    BgTextList
}
export default BgTextList