import React from 'react'
import TableBlock from "./style"
import { v4 as uuidv4 } from 'uuid';

// 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} key={`boxdialer_min iTable_${id}`}>
                <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
