import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { MarketingFooter } from './MarketingFooter';
import React from 'react';

const columns = [
  {
    heading: 'Product',
    links: [
      { label: 'Features', href: '/features' },
      { label: 'Pricing', href: '/pricing' },
    ],
  },
  {
    heading: 'Company',
    links: [{ label: 'About', href: '/about' }],
  },
];

describe('MarketingFooter', () => {
  it('renders the logo and tagline', () => {
    render(
      <MarketingFooter
        logo={<span>Xertica</span>}
        tagline="Helping enterprises adopt AI safely."
        columns={columns}
      />
    );

    expect(screen.getByText('Xertica')).toBeInTheDocument();
    expect(screen.getByText('Helping enterprises adopt AI safely.')).toBeInTheDocument();
  });

  it('renders each column heading and its links as anchors', () => {
    render(<MarketingFooter logo={<span>Xertica</span>} columns={columns} />);

    expect(screen.getByText('Product')).toBeInTheDocument();
    expect(screen.getByText('Company')).toBeInTheDocument();

    const featuresLink = screen.getByRole('link', { name: 'Features' });
    expect(featuresLink).toHaveAttribute('href', '/features');
    expect(screen.getByRole('link', { name: 'About' })).toHaveAttribute('href', '/about');
  });

  it('omits the tagline paragraph when not provided', () => {
    const { container } = render(<MarketingFooter logo={<span>Xertica</span>} columns={columns} />);

    expect(container.querySelector('p.text-sm')).not.toBeInTheDocument();
  });

  it('renders copyright and legal links when provided', () => {
    render(
      <MarketingFooter
        logo={<span>Xertica</span>}
        columns={columns}
        copyright="© 2026 Xertica AI"
        legalLinks={[
          { label: 'Privacy', href: '/privacy' },
          { label: 'Terms', href: '/terms' },
        ]}
      />
    );

    expect(screen.getByText('© 2026 Xertica AI')).toBeInTheDocument();
    expect(screen.getByRole('link', { name: 'Privacy' })).toHaveAttribute('href', '/privacy');
    expect(screen.getByRole('link', { name: 'Terms' })).toHaveAttribute('href', '/terms');
  });

  it('omits the legal links list when not provided', () => {
    render(
      <MarketingFooter logo={<span>Xertica</span>} columns={[]} copyright="© 2026 Xertica AI" />
    );

    expect(screen.getByText('© 2026 Xertica AI')).toBeInTheDocument();
    expect(screen.queryByRole('list')).not.toBeInTheDocument();
  });

  it('resolves the desktop grid-cols class from the number of columns', () => {
    const { container, rerender } = render(
      <MarketingFooter logo={<span>Xertica</span>} columns={columns} />
    );
    // 2 columns + logo cell = 3
    expect(container.querySelector('.grid')).toHaveClass('md:grid-cols-3');

    const manyColumns = ['Product', 'Company', 'Resources', 'Legal', 'Support', 'Partners'].map(
      heading => ({ heading, links: [{ label: 'Link', href: '/' }] })
    );
    rerender(<MarketingFooter logo={<span>Xertica</span>} columns={manyColumns} />);
    // 6 columns + logo cell capped at 6
    expect(container.querySelector('.grid')).toHaveClass('md:grid-cols-6');
  });
});