import { test, expect } from '@playwright/test';

test.describe('Visual Regression - Sidebar', () => {
    test('should match design tokens implementation', async ({ page }) => {
        // Visit the Storybook iframe directly for isolation
        // ID derived from title: 'App/Layouts/Sidebar' -> 'app-layouts-sidebar'
        await page.goto('http://localhost:6006/iframe.html?id=app-layouts-sidebar--default&viewMode=story');

        // Wait for component to be stable
        await page.waitForSelector('aside');

        // Take snapshot of the entire customized layout (Side bar is fixed position in the story)
        // We target the aside element directly for the component snapshot
        const sidebar = page.locator('aside');
        await expect(sidebar).toBeVisible();

        // Initial State Snapshot
        await expect(sidebar).toHaveScreenshot('sidebar-default.png');

        // Interaction Test: Hover over an item
        const studioItem = page.getByText('Cloud Files');
        await studioItem.hover();

        // Allow animation to complete (transition duration-200)
        await page.waitForTimeout(300);

        // Hover State Snapshot
        await expect(sidebar).toHaveScreenshot('sidebar-hover-item.png');
    });
});