import React from 'react';
import { render } from '@/components/testUtils';
import { HorizontalSpacer, VerticalSpacer } from '@/components/shared/Spacers';
import { theme } from '@/app/shared/theme';

describe('[Component] Spacers', () => {
  test('renders Vertical correctly', () => {
    const component = render(
      <VerticalSpacer heightUnits={3} testID="vertical-spacer" />
    );

    expect(component).toMatchSnapshot();
  });

  test('renders HorizontalSpacer correctly', () => {
    const component = render(
      <HorizontalSpacer widthUnits={3} testID="horizontal-spacer" />
    );

    expect(component).toMatchSnapshot();
  });

  test('applies correct height for VerticalSpacer based on heightUnits', () => {
    const { getByTestId } = render(
      <VerticalSpacer heightUnits={3} testID="vertical-spacer" />
    );

    const spacer = getByTestId('vertical-spacer');
    expect(spacer).toHaveStyle({ height: theme.layout.gridUnit * 3 });
  });

  test('applies correct width for HorizontalSpacer based on widthUnits', () => {
    const { getByTestId } = render(
      <HorizontalSpacer widthUnits={4} testID="horizontal-spacer" />
    );

    const spacer = getByTestId('horizontal-spacer');
    expect(spacer).toHaveStyle({ width: theme.layout.gridUnit * 4 });
  });
});