// @ts-check
import React from 'react';
import { test, expect } from '@playwright/experimental-ct-react';
import Card from './index.jsx';
import { axeptio } from '../../Presets';
import { Provider } from '../../DesignSystem';

/**
 * Custom test utility function that wraps a test component with ThemeProvider
 * This function cannot be imported from another file because it breaks the tests
 * https://github.com/microsoft/playwright/issues/15620
 * @param {JSX.Element} component
 */
function withThemeProvider(component) {
  return (
    /* @ts-expect-error Server Component */
    <Provider theme={axeptio}>{component}</Provider>
  );
}

test.use({ viewport: { width: 500, height: 500 } });

test('Default CSS Card', async ({ mount }) => {
  const component = await mount(
    withThemeProvider(
      <Card
        title={'Consentement Marketing'}
        titleAs={'h3'}
        description={'Newsletters phoning partenaires...'}
        textLink={'Lire la suite'}
        iconLink={null}
        image={
          'https://images.prismic.io/axeptio/NmZlZDM3ZDMtOGM3NC00NGVjLWE5ZjQtYTgwNzZlMjNkMThj_624459a5157022899a9f0a35_wolfpack_coaching_illu.png?auto=compress,format&rect=0,0,1080,1080&w=1080&h=1080'
        }
      />
    )
  );
  await expect(component).toHaveCSS('border', '1px solid rgb(221, 221, 221)');
  await expect(component).toHaveCSS('border-radius', '20px');
  await expect(component).toHaveCSS('cursor', 'pointer');
});

test('Font Card', async ({ mount }) => {
  const component = await mount(
    withThemeProvider(
      <Card
        title={'Consentement Marketing'}
        titleAs={'h3'}
        description={'Newsletters phoning partenaires...'}
        textLink={'Lire la suite'}
        iconLink={null}
        image={
          'https://images.prismic.io/axeptio/NmZlZDM3ZDMtOGM3NC00NGVjLWE5ZjQtYTgwNzZlMjNkMThj_624459a5157022899a9f0a35_wolfpack_coaching_illu.png?auto=compress,format&rect=0,0,1080,1080&w=1080&h=1080'
        }
      />
    )
  );
  await expect(component).toHaveCSS('font-family', '"Source Sans Pro", sans-serif');
});