const GalleriaProps = [
    {
        name: 'id',
        type: 'string',
        default: 'null',
        description: 'Unique identifier of the element.'
    },
    {
        name: 'value',
        type: 'array',
        default: 'null',
        description: 'An array of objects to display.'
    },
    {
        name: 'activeIndex',
        type: 'number',
        default: '0',
        description: 'Index of the first item.'
    },
    {
        name: 'fullscreen',
        type: 'boolean',
        default: 'false',
        description: 'Whether to display the component on fullscreen.'
    },
    {
        name: 'visible',
        type: 'boolean',
        default: 'false',
        description: 'Specifies the visibility of the mask on fullscreen mode.'
    },
    {
        name: 'numVisible',
        type: 'number',
        default: '3',
        description: 'Number of items per page.'
    },
    {
        name: 'responsiveOptions',
        type: 'any',
        default: 'null',
        description: 'An array of options for responsive design.'
    },
    {
        name: 'showItemNavigators',
        type: 'boolean',
        default: 'false',
        description: 'Whether to display navigation buttons in item section.'
    },
    {
        name: 'showThumbnailNavigators',
        type: 'boolean',
        default: 'true',
        description: 'Whether to display navigation buttons in thumbnail container.'
    },
    {
        name: 'showItemNavigatorsOnHover',
        type: 'boolean',
        default: 'false',
        description: 'Whether to display navigation buttons on item hover.'
    },
    {
        name: 'changeItemOnIndicatorHover',
        type: 'boolean',
        default: 'false',
        description: 'When enabled, item is changed on indicator hover.'
    },
    {
        name: 'circular',
        type: 'boolean',
        default: 'false',
        description: 'Defines if scrolling would be infinite.'
    },
    {
        name: 'autoPlay',
        type: 'boolean',
        default: 'false',
        description: 'Items are displayed with a slideshow in autoPlay mode.'
    },
    {
        name: 'transitionInterval',
        type: 'number',
        default: '4000',
        description: 'Time in milliseconds to scroll items.'
    },
    {
        name: 'showThumbnails',
        type: 'boolean',
        default: 'true',
        description: 'Whether to display thumbnail container.'
    },
    {
        name: 'thumbnailsPosition',
        type: 'string',
        default: 'bottom',
        description: 'Position of thumbnails. Valid values are "bottom", "top", "left" and "right".'
    },
    {
        name: 'verticalThumbnailViewPortHeight',
        type: 'string',
        default: '300px',
        description: 'Height of the viewport in vertical thumbnail.'
    },
    {
        name: 'showIndicators',
        type: 'boolean',
        default: 'false',
        description: 'Whether to display indicator container.'
    },
    {
        name: 'showIndicatorsOnItem',
        type: 'boolean',
        default: 'false',
        description: 'When enabled, indicator container is displayed on item container.'
    },
    {
        name: 'indicatorsPosition',
        type: 'string',
        default: 'bottom',
        description: 'Position of indicators. Valid values are "bottom", "top", "left" and "right".'
    },
    {
        name: 'baseZIndex',
        type: 'number',
        default: '0',
        description: 'ase zIndex value to use in layering.'
    },
    {
        name: 'maskClass',
        type: 'string',
        default: 'null',
        description: 'Style class of the mask on fullscreen mode.'
    },
    {
        name: 'containerStyle',
        type: 'any',
        default: 'null',
        description: "Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used."
    },
    {
        name: 'containerClass',
        type: 'any',
        default: 'null',
        description: "Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used."
    }
];

const GalleriaSlots = [
    {
        name: 'header',
        description: "Custom content for the component's header"
    },
    {
        name: 'footer',
        description: "Custom content for the component's header"
    },
    {
        name: 'item',
        description: 'Custom content for the item'
    },
    {
        name: 'caption',
        description: 'Custom caption content'
    },
    {
        name: 'thumbnail',
        description: 'Custom thumbnail content'
    },
    {
        name: 'indicator',
        description: 'Custom indicator content'
    }
];

module.exports = {
    galleria: {
        name: 'Galleria',
        description: 'Galleria is an advanced content gallery component.',
        props: GalleriaProps,
        slots: GalleriaSlots
    }
};