import React from 'react';

import renderWithTheme from '../../../testUtils/renderWithTheme';

import { StyledCard, StyledCardHeader, StyledCardContent } from '../StyledCard';

describe('StyledCard', () => {
  it('has withBorder style', () => {
    const { container } = renderWithTheme(
      <StyledCard themeStatus="withBorder" />
    );

    expect(container.firstChild).toMatchSnapshot();
  });

  it('has withoutBorder style', () => {
    const { container } = renderWithTheme(
      <StyledCard themeStatus="withoutBorder" />
    );

    expect(container.firstChild).toMatchSnapshot();
  });
});

describe('StyledCardHeader', () => {
  it('has small style', () => {
    const { container } = renderWithTheme(
      <StyledCardHeader themeSize="small" themeVariant="basic" />
    );

    expect(container.firstChild).toMatchSnapshot();
  });

  it('has medium style', () => {
    const { container } = renderWithTheme(
      <StyledCardHeader themeSize="medium" themeVariant="basic" />
    );

    expect(container.firstChild).toMatchSnapshot();
  });

  it.each`
    variant
    ${'basic'}
    ${'primary'}
    ${'info'}
    ${'grey'}
  `('has $variant style', ({ variant }) => {
    const { container } = renderWithTheme(
      <StyledCardHeader themeSize="medium" themeVariant={variant} />
    );

    expect(container.firstChild).toMatchSnapshot();
  });
});

describe('StyledCardHeader', () => {
  it('has small style', () => {
    const { container } = renderWithTheme(
      <StyledCardContent themeSize="small" themeVariant="mainContent" />
    );

    expect(container.firstChild).toMatchSnapshot();
  });

  it('has medium style', () => {
    const { container } = renderWithTheme(
      <StyledCardContent themeSize="medium" themeVariant="mainContent" />
    );

    expect(container.firstChild).toMatchSnapshot();
  });

  it('has mainContent style', () => {
    const { container } = renderWithTheme(
      <StyledCardContent themeSize="medium" themeVariant="mainContent" />
    );

    expect(container.firstChild).toMatchSnapshot();
  });

  it('has extra style', () => {
    const { container } = renderWithTheme(
      <StyledCardContent themeSize="medium" themeVariant="extra" />
    );

    expect(container.firstChild).toMatchSnapshot();
  });
});