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

import { DraftOutputTeaser } from './DraftOutputTeaser';

vi.mock('@/lib/analytics', () => ({ trackEvent: vi.fn() }));

describe('DraftOutputTeaser', () => {
  it('renders the teaser container', () => {
    render(<DraftOutputTeaser siteId={1} />);

    expect(screen.getByTestId('draft-output-teaser')).toBeInTheDocument();
  });

  it('shows the taste-before-commitment label', () => {
    render(<DraftOutputTeaser siteId={1} />);

    expect(
      screen.getByText(/Here is an example of what RankWiz generates for a page like yours/i),
    ).toBeInTheDocument();
  });

  it('shows the sample draft headline', () => {
    render(<DraftOutputTeaser siteId={1} />);

    expect(
      screen.getByText(/How to Improve Your Blog.*s Search Rankings/i),
    ).toBeInTheDocument();
  });

  it('tracks byok_teaser_shown on mount with source wizard', async () => {
    const { trackEvent } = await import('@/lib/analytics');
    render(<DraftOutputTeaser siteId={42} />);

    expect(trackEvent).toHaveBeenCalledWith('byok_teaser_shown', {
      source: 'wizard',
      site_id: '42',
    });
  });
});