import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import { defaultBlock } from '../../icons';
import metadata from './block.json';
import './style.scss';
import productIcon from '../../../images/checkout/product.png';

const Edit = () => {
    const blockProps = useBlockProps({
        className: 'invoice-wrapper'
    });

    return (
        <div {...blockProps}>
            <table className="mp-invoice-table" style={{ width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed' }}>
                <colgroup>
                    <col style={{ width: '70%' }} />
                    <col style={{ width: '30%' }} />
                </colgroup>
                <tbody>
                    <tr style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.2)' }}>
                        <td style={{ padding: '20px 0' }}>
                            <div style={{ display: 'flex', gap: '20px', alignItems: 'flex-start' }}>
                                <div className="mp-cart-item-image" style={{ flexShrink: 0 }}>
                                    <img src={productIcon} alt="" style={{ width: '50px', height: '50px', display: 'block' }} />
                                </div>
                                <div className="mp-cart-item-details" style={{ flex: 1, minWidth: 0 }}>
                                    <p style={{ fontSize: '16px', margin: '0 0 5px 0', color: '#1d1d1d' }}><strong>Sample Product Name</strong></p>
                                    <p className="desc" style={{ fontSize: '14px', margin: 0, color: 'rgba(0, 0, 0, 0.56)' }}>$29</p>
                                </div>
                            </div>
                        </td>
                        <td style={{ textAlign: 'right', padding: '20px 0', color: '#1d1d1d', fontSize: '24px', verticalAlign: 'top' }}>
                            <strong>$29.00</strong>
                        </td>
                    </tr>
                    <tr>
                        <td style={{ padding: '20px 0', fontSize: '18px', color: 'rgba(0, 0, 0, 0.56)' }}>
                            <strong>Total</strong>
                        </td>
                        <td style={{ textAlign: 'right', padding: '20px 0', color: '#1d1d1d', fontSize: '24px' }}>
                            <strong>$29.00</strong>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    );
};

const Save = () => {
    return null; // Server-side rendered
};

registerBlockType(metadata.name, {
    ...metadata,
    icon: defaultBlock,
    edit: Edit,
    save: Save
});
