const { 
    SlashCommandBuilder,
    EmbedBuilder,
    TextDisplayBuilder,
    MessageFlags,
    SeparatorBuilder,
    SeparatorSpacingSize,
    SectionBuilder,
    ThumbnailBuilder,
    ButtonBuilder,
    ButtonStyle,
    MediaGalleryBuilder, 
    ContainerBuilder
} = require('discord.js');

module.exports = {
    data: new SlashCommandBuilder()
        .setName('new-update')
        .setDescription('This is components version 2.'),
    async execute(interaction, client) {
        // Command execution logic goes here
       
        const container = new ContainerBuilder();

        const thumbnail = new ThumbnailBuilder({
            media: {
                url: 'https://i.ibb.co/yFsBTGDL/docs-header.jpg'
            }
        })

        const section = new SectionBuilder()
            .setThumbnailAccessory(thumbnail);

        container.addSectionComponents(section);

        const text1 = new TextDisplayBuilder().setContent(`## Introducing New Components for Messages!
            We're bringing new components to messages that you can use in your apps. They allow you to have full control over the layout of your messages.
            Our previous components system. while functional, had limitations:
             - Content, attachments, embedds, and components had to follow fixed positioning rulesa
             - Visual styling options were limited
             
            Our new component system addresses these challenged with fully composible components that can be arragned and laid out in any order, allowing for a more flexible and visually appealing design. Check out the changelog for more details.`)

        container.addTextDisplayComponents(text1);

        const thumbnail2 = new ThumbnailBuilder({
            media: {
                url: 'https://i.ibb.co/RTSs4JWp/components-hero.png'
            }
        })

        const section2 = new SectionBuilder()
            .setThumbnailAccessory(thumbnail2);

        container.addSectionComponents(section2);

        
        interaction.reply({
            flags: MessageFlags.IsComponentsV2,
            components: [container]
        })

        
        
        
        
    }
};