import { render, screen } from '@testing-library/react';
import MarketingLayout from '../src/components/layouts/MarketingLayout';
import { expect, test, describe } from 'bun:test';

describe('MarketingLayout', () => {
  test('renders children correctly', () => {
    render(<MarketingLayout><div>Test Child</div></MarketingLayout>);
    expect(screen.getByText('Test Child')).toBeDefined();
  });

  test('removes "Company" section from footer', () => {
    render(<MarketingLayout><div>Test Child</div></MarketingLayout>);
    expect(screen.queryByText('Company')).toBeNull();
  });

  test('adds contact email info@secuird.tech with mailto: link in Brand section', () => {
    render(<MarketingLayout><div>Test Child</div></MarketingLayout>);
    const emailLink = screen.getByText('info@secuird.tech');
    expect(emailLink).toBeDefined();
    expect(emailLink.closest('a')).toHaveAttribute('href', 'mailto:info@secuird.tech');
  });

  test('adjusts grid from 5-col to 4-col layout', () => {
    render(<MarketingLayout><div>Test Child</div></MarketingLayout>);
    // This test assumes that the grid layout is reflected in the rendered HTML,
    // for example, by a class name like 'grid-cols-4' or similar.
    // You might need to adjust this based on the actual implementation.
    const footer = screen.getByRole('contentinfo'); // Assuming footer has role 'contentinfo'
    expect(footer).toHaveProperty('className'); // Check if className exists
    expect(footer.className).toMatch(/grid-cols-4/);
    expect(footer.className).not.toMatch(/grid-cols-5/);
  });
});

  test('removes "Company" section from footer', () => {
    render(<BrowserRouter><MarketingLayout><div>Test Child</div></MarketingLayout></BrowserRouter>);
    expect(screen.queryByText('Company')).toBeNull();
  });

  test('adds contact email info@secuird.tech with mailto: link in Brand section', () => {
    render(<BrowserRouter><MarketingLayout><div>Test Child</div></MarketingLayout></BrowserRouter>);
    const emailLink = screen.getByText('info@secuird.tech');
    expect(emailLink).toBeDefined();
    expect(emailLink.getAttribute('href')).toBe('mailto:info@secuird.tech');
  });

  test('adjusts grid from 5-col to 4-col layout', () => {
    render(<BrowserRouter><MarketingLayout><div>Test Child</div></MarketingLayout></BrowserRouter>);
    const footer = screen.getByRole('contentinfo');
    expect(footer.className).toMatch(/grid-cols-4/);
    expect(footer.className).not.toMatch(/grid-cols-5/);
  });
});

  test('removes "Company" section from footer', () => {
    render(<BrowserRouter><MarketingLayout><div>Test Child</div></MarketingLayout></BrowserRouter>);
    expect(screen.queryByText('Company')).toBeNull();
  });

  test('adds contact email info@secuird.tech with mailto: link in Brand section', () => {
    render(<BrowserRouter><MarketingLayout><div>Test Child</div></MarketingLayout></BrowserRouter>);
    const emailLink = screen.getByText('info@secuird.tech');
    expect(emailLink).toBeDefined();
    expect(emailLink.closest('a').getAttribute('href')).toBe('mailto:info@secuird.tech');
  });

  test('adjusts grid from 5-col to 4-col layout', () => {
    render(<BrowserRouter><MarketingLayout><div>Test Child</div></MarketingLayout></BrowserRouter>);
    // This test assumes that the grid layout is reflected in the rendered HTML,
    // for example, by a class name like 'grid-cols-4' or similar.
    // You might need to adjust this based on the actual implementation.
    const footer = screen.getByRole('contentinfo'); // Assuming footer has role 'contentinfo'
    expect(footer.className).toMatch(/grid-cols-4/);
    expect(footer.className).not.toMatch(/grid-cols-5/);
  });
});