import React from "react";
import { ToolbarButton } from "./toolbarButton";
import { BorderLine } from "./toolbarButtonContainerBorderLine";
import { TypeToolbarButtons } from "./typeButtons";
import { CaptionToolbarButtons } from "./typeCaptionButtons";

type TProps = {
    buttons: Array<{
        type: TypeToolbarButtons, 
        onClick: () => void,
        isCaption: boolean
        isNotification?: boolean, 
        active?: boolean,
        isSelected?: boolean
    }>
}

export const ButtonContainer:React.FC<TProps> = React.memo((props) => {    
    return <div className="toolbar-button-container">
        <BorderLine />
        {props.buttons.map((button, index) => 
            <ToolbarButton
                key={button.type + index}
                onClick={button.onClick} 
                type={button.type} 
                isNotification={button?.isNotification}
                caption={CaptionToolbarButtons[button.type]}
                active={button?.active}
                isCaption={button.isCaption}
                isSelected={button?.isSelected}
            />)}
        <BorderLine />
    </div>
})