import React from 'react';
import {
    OpenSideMenuPanel,
    CloseSideMenuPanel,
    CloseNotHoverSideMenuPanel,
} from './styled.panel';

interface SideMenuPanelProps {
    open: boolean,
    hasChildren: boolean,
    children?: React.ReactNode | React.ReactNode[] | any
}

export const SideMenuPanel: React.FC<SideMenuPanelProps> = ({ open, hasChildren, children }) => {
    return (
        open
            ? (
                <OpenSideMenuPanel>
                    {children}
                </OpenSideMenuPanel>
            )
            : hasChildren
                ? (
                    <CloseSideMenuPanel>
                        {children}
                    </CloseSideMenuPanel>
                )
                : (
                    <CloseNotHoverSideMenuPanel>
                        {children}
                    </CloseNotHoverSideMenuPanel>
                )
    );
}