import { expect, test } from '@playwright/experimental-ct-react';

import { themedTestSuite } from '../../../../playwright/themes';
import { NJBreadcrumb, NJBreadcrumbItem } from '@engie-group/fluid-design-system-react';

const props = [
  { isActive: true, label: 'Item is active' },
  { isActive: false, label: 'Item is not active' },
  {
    isActive: true,
    label: 'Item is active with icon before',
    iconName: 'home',
    iconPosition: 'before'
  },
  {
    isActive: false,
    label: 'Item is not active with icon before',
    iconName: 'home',
    iconPosition: 'before'
  },
  {
    isActive: true,
    label: 'Item is active with icon after',
    iconName: 'home',
    iconPosition: 'after'
  },
  {
    isActive: false,
    label: 'Item is not active with icon after',
    iconName: 'home',
    iconPosition: 'after'
  }
] as const;

test.describe('[VISUAL][NJBreadcrumbItem]', () => {
  themedTestSuite(({ screenshotFileName }) => {
    test.describe(`should render correctly`, () => {
      test.describe(() => {
        test.use({ viewport: { width: 300, height: 150 } });

        test(`variations`, async ({ mount, page }) => {
          await mount(
            <div>
              {props.map((prop, i) => (
                <NJBreadcrumb key={i}>
                  <NJBreadcrumbItem
                    aria-current={prop.isActive}
                    icon={'iconName' in prop ? prop.iconName : undefined}
                    iconPosition={'iconPosition' in prop ? prop.iconPosition : undefined}
                  >
                    {'label' in prop && prop.label}
                  </NJBreadcrumbItem>
                </NJBreadcrumb>
              ))}
            </div>
          );
          await expect(page).toHaveScreenshot(screenshotFileName('all variations'));
        });
      });
    });
  });
});