import React, {Dispatch, SetStateAction} from "react";
import {Layout, Space} from "antd";
import LocalePicker from "../../Components/Misc/LocalePicker";
import HeaderSearch from "../../Components/Misc/HeaderSearch";
import HeaderStats from "./HeadersStats";

const {Header} = Layout;

interface HeadProps {
    collapseAction: () => void,
    collapsedState: boolean,
    search: boolean,
    setSearch: Dispatch<SetStateAction<boolean>>,
}

const HeaderLayout: React.FC<HeadProps> = (props: HeadProps) => {
    return (
        <Header className="layout-header" style={{padding: 0}}>
            <div className="header-inner">
                <div className={props.collapsedState ? "header-burger active" : "header-burger"}>
                    <div
                        className="header-burger-inner"
                        onClick={props.collapseAction}
                    >
                        <span/>
                        <span/>
                        <span/>
                    </div>
                </div>

                <Space className="header-right">
                    <HeaderSearch search={props.search} setSearch={props.setSearch}/>
                    <LocalePicker/>

                    <HeaderStats />
                </Space>
            </div>
        </Header>
    );
};

export default HeaderLayout;
