import React from 'react'
import TableBlock from "./style"


// id, title, inputTag, type: 'row' || 'column'
const MiniTable = ({
                       data,
                       gap = '5px'
                   }) => {
    return (<TableBlock gap={gap}>
        {data?.map(({id, title, inputTag, type, child, gap}) => (
            <TableBlock.Row  id={id} gap={gap}>
                <TableBlock.RowInset blockType={type}>
                    <p className={'title'}>{title}</p>
                    <div className={'inputArea'}>{inputTag}</div>
                </TableBlock.RowInset>
                {
                    child && <div className={'child'}>{child}</div>
                }
            </TableBlock.Row>
        ))}
    </TableBlock>)
}

export default MiniTable