import React from "react";
import { IDiv, TElements } from "../../types/interface"
import { JDalign } from "../components"
import { JDicon } from "../icons/Icons"

interface IProps extends IDiv {
    onMenuClick?: () => void;
    rightChilds?: TElements
    middleChilds?: TElements
    leftChilds?: TElements
    logo?: string
}

const Header: React.FC<IProps> = ({ children, onMenuClick, rightChilds, leftChilds, middleChilds, className, ...props }) => {


    return (
        <header {...props} className={`header ${className}`}>
            <JDalign flex={{
                vCenter: true,
                between: true
            }} className="header__items">
                <div>
                    {onMenuClick && <JDicon size="small" hover onClick={onMenuClick} color="white" icon="menu" />}
                    {leftChilds}
                </div>
                {middleChilds && <div className="header__middle">
                    {middleChilds}
                </div>}
                {rightChilds && <div style={{
                    justifySelf: "flex-end"
                }}>
                    {rightChilds}
                </div>}
            </JDalign>
        </header>
    )
}

export default Header
