import {range} from "./utils";
import React from "react";
import {useShopStore} from "./shop_store";
import {SummaryCrate} from "./SummaryCrate";

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

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

    const crates_l = useShopStore((state) => state.crates.length);

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

    return (
        <>
            {range(0, crates_l).map((index, _i) => {
                return <SummaryCrate crate_index={index} key={"summary_crate_body_" + index} />
            })}
            <SummaryOrderPricedOptions/>
            <SummaryOrderShipping/>
        </>
    )
}