import React, { Component } from "react";

require("./OptionalSection.scss");


function renderDefaultTitle(checked, title, onStatusChange, disabled) {
    return (
        <div onClick={ (e) => typeof onStatusChange === "function" && onStatusChange(!checked) } className="optional-section-title">
            <input type="checkbox" checked={ checked } onChange={ () => null } />
            <span>{ title }</span>
        </div>
    );
}


export default ({ checked, renderTitle, title, className, children, onStatusChange, disabled }) => {
    if (typeof renderTitle !== "function") {
        renderTitle = renderDefaultTitle;
    }

    return (
        <div className={ className }>
            { renderTitle(checked || false, title, onStatusChange, disabled) }
            { checked ? children : null }            
        </div>
    );
}
