import { test, expect } from '@playwright/test';

test('#3 Verify Apply now and Learn more buttons do not overlap in mobile view', async ({ page }) => {
  // Go to the careers page with job listings
  await page.goto('https://careers-page.com/linkstalent?mode=preview#openings', { waitUntil: 'domcontentloaded' });

  // Emulate a typical mobile viewport size (e.g., iPhone 12)
  await page.setViewportSize({ width: 390, height: 844 });

  // Wait for job cards to load
  await page.waitForSelector('.job-element-in-list-footer');

  // Get all job cards footer sections containing buttons
  const footers = await page.$$('.job-element-in-list-footer');

  for (const footer of footers) {
    const applyBtn = await footer.$('a.btn-primary.btn-xs');
    const learnMoreBtn = await footer.$('a.btn.btn-view-job');

    expect(applyBtn).not.toBeNull();
    expect(learnMoreBtn).not.toBeNull();

    // Check if both buttons are visible
    expect(await applyBtn!.isVisible()).toBe(true);
    expect(await learnMoreBtn!.isVisible()).toBe(true);

    // Get bounding boxes of both buttons
    const applyBox = await applyBtn!.boundingBox();
    const learnMoreBox = await learnMoreBtn!.boundingBox();

    expect(applyBox).not.toBeNull();
    expect(learnMoreBox).not.toBeNull();

    if (applyBox && learnMoreBox) {
      // Check buttons do not overlap by verifying horizontal space
      const overlapHorizontally =
        Math.max(applyBox.x, learnMoreBox.x) <
        Math.min(applyBox.x + applyBox.width, learnMoreBox.x + learnMoreBox.width);

      // Check buttons do not overlap vertically as well (just in case)
      const overlapVertically =
        Math.max(applyBox.y, learnMoreBox.y) <
        Math.min(applyBox.y + applyBox.height, learnMoreBox.y + learnMoreBox.height);

      // Assert no overlap on both axes
      expect(overlapHorizontally && overlapVertically).toBe(false);
    }
  }
});