import React from "react";
import {useShopStore} from "./shop_store";
import {ProcessOptions} from "./options/Options";

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

export function SummaryOrderShipping() {
    // #!render_count
    const renderCount = useRenderCount();

    const shipping_summary = useShopStore((state) => state.shipping_summary);
    const options_data = useShopStore((state) => state.order_options_data);

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

    const options = ProcessOptions({
        options: shipping_summary,
        data: options_data,
        id: "shipping_options",
        target: null,
    });

    return <tbody key="summary_shipping_order_body">
    {options.map((option, i) => (
        <tr key={"summary_shipping_order_option_" + i} id={"summary_shipping_order_option_" + i}>
            <td className="item-card-name" key={"summary_shipping_order_key_option_" + i} id={"summary_shipping_order_key_option_" + i}>
                {option}
            </td>
        </tr>
    ))}
    </tbody>;
}