class DisplayMode {
    constructor(containerId) {
        this.containerId = containerId || '.display-products .row';
        this.container = document.querySelector(this.containerId);
        this.init();
    }

    init() {
        const gridButton = document.getElementById('grid-view');
        const listButton = document.getElementById('list-view');

        gridButton.addEventListener('click', () => this.toggleView('grid'));
        listButton.addEventListener('click', () => this.toggleView('list'));
    }

    toggleView(viewMode) {
        const rowElement = document.querySelector('.vehicles-container');

        // Remove 'selected' class from both buttons
        document.getElementById('grid-view').classList.remove('selected');
        document.getElementById('list-view').classList.remove('selected');

        // Add the appropriate classes based on the clicked button
        if (viewMode === 'grid') {
            rowElement.classList.remove('flex', 'flex-col', 'items-stretch');
            rowElement.classList.add('grid', 'md:grid-cols-2', 'lg:grid-cols-3', 'transition-all', 'duration-500');
            document.getElementById('grid-view').classList.add('selected');
        } else if (viewMode === 'list') {
            rowElement.classList.remove('grid', 'md:grid-cols-2', 'lg:grid-cols-3');
            rowElement.classList.add('flex', 'flex-col', 'items-stretch', 'transition-all', 'duration-500');
            document.getElementById('list-view').classList.add('selected');
        }

        // Update individual cards based on viewMode
        const cards = rowElement.querySelectorAll('.vehicle-card');
        cards.forEach(card => {
            const vehicleImage = card.querySelector('.vehicle-image');
            vehicleImage.classList.remove('w-1/4', 'w-full');
            if (viewMode === 'list') {
                card.classList.add('flex', 'flex-row' ,'justify-start', 'items-stretch', 'gap-3')
                // flex flex-row justify-start   gap-3
                vehicleImage.classList.add('w-1/4');
            } else {
                card.classList.remove('flex', 'flex-row' ,'justify-start', 'items-stretch', 'gap-3')

                vehicleImage.classList.add('w-full');
            }
        });
    }
}
