import { Dynamic } from "solid-js/web";
import { mergeProps } from "solid-js";
import config from "../base/config"

import "./tableItem.css"


function Scroll(props) {
    const parentProps = mergeProps(props);
    return <div className={'colItem col' + parentProps.flex} style={parentProps.style}>
        <div class="j">{parentProps.text} </div>
        <marquee behavior="scroll">{props.text} </marquee>
    </div>
}
function Text(props) {
    const parentProps = mergeProps(props);
    return <div className={'colItem col' + parentProps.flex} style={parentProps.style}>
        {props.text}
    </div>
}

const objComponents = {
    Scroll,
    Text
}

function tableItem(props) {
    const parentProps = mergeProps(props);
    return <div className="tableItem row" style={'box-shadow: 0 4px 3px 0 ' + props.showColor}>
        <For each={parentProps.list}>
            {li => (
                <Dynamic text={li.text} flex={li.flex || 1} component={objComponents[li.type || 'Text']} />
            )}
        </For>
    </div>
}

export default tableItem;
