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

describe('CTASection', () => {
  it('renders title, description, and the primary CTA', () => {
    render(
      <CTASection
        title="Ready to modernize your operations?"
        description="Talk to our team about a tailored rollout plan."
        cta={{ label: 'Book a demo', href: '/demo' }}
      />
    );

    expect(screen.getByText('Ready to modernize your operations?')).toBeInTheDocument();
    expect(
      screen.getByText('Talk to our team about a tailored rollout plan.')
    ).toBeInTheDocument();
    const link = screen.getByRole('link', { name: 'Book a demo' });
    expect(link).toHaveAttribute('href', '/demo');
  });

  it('omits the description when none is provided', () => {
    render(<CTASection title="Get started today" cta={{ label: 'Sign up', href: '/signup' }} />);

    expect(screen.getByText('Get started today')).toBeInTheDocument();
    expect(screen.queryByText(/tailored rollout/)).not.toBeInTheDocument();
  });

  it('does not render a secondary CTA when none is provided', () => {
    render(<CTASection title="Get started today" cta={{ label: 'Sign up', href: '/signup' }} />);

    expect(screen.getAllByRole('link')).toHaveLength(1);
  });

  it('renders both CTAs when secondaryCta is provided', () => {
    render(
      <CTASection
        title="Ready to modernize your operations?"
        cta={{ label: 'Book a demo', href: '/demo' }}
        secondaryCta={{ label: 'Contact sales', href: '/contact' }}
      />
    );

    expect(screen.getByRole('link', { name: 'Book a demo' })).toBeInTheDocument();
    expect(screen.getByRole('link', { name: 'Contact sales' })).toBeInTheDocument();
  });

  it('renders CTAs as buttons and fires onClick when no href is given', () => {
    const onClick = vi.fn();
    render(
      <CTASection
        title="Ready to modernize your operations?"
        cta={{ label: 'Book a demo', onClick }}
      />
    );

    const button = screen.getByRole('button', { name: 'Book a demo' });
    button.click();
    expect(onClick).toHaveBeenCalledTimes(1);
  });

  it('applies a custom className to the section', () => {
    const { container } = render(
      <CTASection
        title="Get started today"
        cta={{ label: 'Sign up', href: '/signup' }}
        className="custom-cta"
      />
    );

    expect(container.querySelector('section')).toHaveClass('custom-cta');
  });
});