const SidebarProps = [
    {
        name: 'visible',
        type: 'boolean',
        default: 'false',
        description: 'Specifies the visibility of the dialog.'
    },
    {
        name: 'position',
        type: 'string',
        default: 'left',
        description: 'Specifies the position of the sidebar, valid values are "left", "right", "top", "bottom" and "full".'
    },
    {
        name: 'baseZIndex',
        type: 'number',
        default: '0',
        description: 'Base zIndex value to use in layering.'
    },
    {
        name: 'autoZIndex',
        type: 'boolean',
        default: 'true',
        description: 'Whether to automatically manage layering.'
    },
    {
        name: 'dismissable',
        type: 'boolean',
        default: 'true',
        description: 'Whether clicking outside closes the panel.'
    },
    {
        name: 'showCloseIcon',
        type: 'boolean',
        default: 'true',
        description: 'Whether to display a close icon inside the panel.'
    },
    {
        name: 'modal',
        type: 'boolean',
        default: 'true',
        description: 'Whether to a modal layer behind the sidebar.'
    },
    {
        name: 'ariaCloseLabel',
        type: 'string',
        default: 'close',
        description: 'Aria label of the close icon.'
    }
];

const SidebarEvents = [
    {
        name: 'hide',
        description: 'Callback to invoke when sidebar gets hidden.'
    },
    {
        name: 'show',
        description: 'Callback to invoke when sidebar gets shown.'
    }
];

const SidebarSlots = [
    {
        name: 'header',
        description: 'Custom content for the component header.'
    }
];

module.exports = {
    sidebar: {
        name: 'Sidebar',
        description: 'Sidebar is a panel component displayed as an overlay at the edges of the screen.',
        props: SidebarProps,
        events: SidebarEvents,
        slots: SidebarSlots
    }
};