import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function save({ attributes }) {
    const { graph_title, graph_meta_data, custom_size_width, custom_size_height } = attributes;

    return (
        <div
		{ ...useBlockProps.save() }
        style={ {
            width: isNaN(custom_size_width) || custom_size_width === '__IMAGE__' 
            ? '150px' 
            : custom_size_width + 'px',
            height: isNaN(custom_size_height) || custom_size_height === '__IMAGE__' 
            ? '150px' 
            : custom_size_height + 'px',
            marginInline: 'auto',
        } }
        >
        <RichText.Content tagName="h3" value={graph_title || "Título da Tabela"} className="table-title" />
        <table className="wp-block-table">
            <tbody>
                {graph_meta_data.map((row, rowIndex) => (
                    <tr key={rowIndex}>
                        {row.map((cell, colIndex) => (
                            <td key={colIndex}>
                                <RichText.Content value={String(cell)} />
                            </td>
                        ))}
                    </tr>
                ))}
            </tbody>
        </table>
        </div>
    );
}