import React from 'react';
import {SummaryCrates} from "./SummaryCrates";
import {SummaryTotalPrice} from "./SummaryTotalPrice";

// #!render_count
import {useRenderCount} from "@uidotdev/usehooks";


/**
 * Components that displays the list of card that are used in the crate.
 * It is a summary of purchase
 */
export function SummaryOrder() {
    // #!render_count
    const renderCount = useRenderCount();

    // #!render_count
    console.log("SummaryOrder renders: ", renderCount)

    return (
        <div className="summary-price">

            <table>
                <SummaryCrates/>

                <tfoot>
                <tr>
                    <td className="item-card-name">Price estimate</td>
                    <td className="price">
                        <SummaryTotalPrice/>

                        <span style={{
                            'display': 'inline-block',
                            'width': '30px',
                        }}>&nbsp;</span>
                    </td>
                </tr>
                </tfoot>

            </table>

        </div>
    );
}