// @ts-check
import React from 'react';
import { test, expect } from '@playwright/experimental-ct-react';
import Spacer from './index.jsx';

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

test('Spacer small', async ({ mount }) => {
  const component = await mount(<Spacer small />);
  await expect(component).toHaveCSS('margin-bottom', '10px');
});

test('Spacer default', async ({ mount }) => {
  const component = await mount(<Spacer />);
  await expect(component).toHaveCSS('margin-bottom', '20px');
});

test('Spacer medium', async ({ mount }) => {
  const component = await mount(<Spacer medium />);
  await expect(component).toHaveCSS('margin-bottom', '30px');
});

test('Spacer large', async ({ mount }) => {
  const component = await mount(<Spacer large />);
  await expect(component).toHaveCSS('margin-bottom', '40px');
});

test('Spacer xlarge', async ({ mount }) => {
  const component = await mount(<Spacer xlarge />);
  await expect(component).toHaveCSS('margin-bottom', '50px');
});

test('Spacer xxlarge', async ({ mount }) => {
  const component = await mount(<Spacer xxlarge />);
  await expect(component).toHaveCSS('margin-bottom', '60px');
});

test('Spacer xxxlarge', async ({ mount }) => {
  const component = await mount(<Spacer xxxlarge />);
  await expect(component).toHaveCSS('margin-bottom', '80px');
});