import React from 'react'
import {Accordion} from "react-bootstrap";
import {Crate} from "./Crate.jsx";

export function CrateList({crates, isMobile, isTouch}) {
    return (
        <Accordion defaultActiveKey="0">
            {Object.entries(crates).map(([crate_id, crate], index) =>
                <Accordion.Item eventKey={`${index}`} key={`crate${index}`}>
                    <Accordion.Header>Crate #{`${index}`}</Accordion.Header>
                    <Accordion.Body>
                        <Crate data={{id: crate_id, ...crate}} isTouch={isTouch} isMobile={isMobile}/>
                    </Accordion.Body>
                </Accordion.Item>
            )}
        </Accordion>)
}