import { describe, it, expect, vi } from 'vitest';
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import BlogWizard from '@/features/blog/components/BlogWizard';

describe('BlogWizard - suggestions', () => {
  it('loads suggestions and allows selecting one to fill topic', async () => {
    const user = userEvent.setup();
    const onFetchSuggestions = vi.fn().mockResolvedValue([
      'Thema A',
      'Thema B',
    ] as string[]);

    render(
      <BlogWizard
        onComplete={() => {}}
        onFetchSuggestions={onFetchSuggestions}
      />
    );

    // Click the suggestion button
    const suggestBtn = await screen.findByRole('button', { name: /Thema vorschlagen lassen/i });
    await user.click(suggestBtn);

    // Suggestions popover/list should appear
    const item = await screen.findByRole('button', { name: 'Thema A' });
    await user.click(item);

    // Topic input should now contain selected suggestion
    const input = await screen.findByPlaceholderText(/Zum Beispiel:/i);
    expect((input as HTMLInputElement).value).toBe('Thema A');
  });
});
