import React from 'react';
import {useShopStore} from "./shop_store";

/**
 * Component that provides a base layout (aside/main) for the page.
 */


export function Layout({aside, main}) {
    const {mobileSideMenuShouldOpen, onClickToggleMobileSideMenu, showCardAddedFeedback} = useShopStore((state) => ({
        mobileSideMenuShouldOpen: state.sideMenuIsOpen,
        onClickToggleMobileSideMenu: state.switchSideMenu,
        showCardAddedFeedback: state.showCardAddedFeedback,
        isMobile: state.isMobile,
    }));

    return (
            <div className="layout">

                <aside className={'aside ' + (mobileSideMenuShouldOpen ? 'menu-opened' : '')}>{aside}</aside>

                {mobileSideMenuShouldOpen ? (
                    <section className="main" onClick={onClickToggleMobileSideMenu}>{main}</section>
                ) : (
                    <section className="main">{main}</section>
                )}

                {showCardAddedFeedback ? (
                    <div className="feedback-add-success">
                        ✓ added
                    </div>
                ) : null}
            </div>
        );
}