import type {
    Locator,
    Page,
} from '@playwright/test';
import { BasePage } from './base-page';

/**
 * Page object for the root comparison view. Encapsulates locators for the
 * primary controls so tests don't hardcode aria-labels or DOM structure.
 */
export class ComparisonPage extends BasePage {
    readonly searchInput: Locator;
    readonly previewInput: Locator;

    constructor(page: Page) {
        super(page);
        this.searchInput = page.getByRole('textbox', { name: 'Search typefaces' });
        this.previewInput = page.getByRole('textbox', { name: 'Preview text' });
    }

    /**
     * Open the root page and wait for the main controls to be interactable.
     */
    async open() {
        await this.goto('/');
        await this.searchInput.waitFor({ state: 'visible' });
    }

    async searchFor(query: string) {
        await this.searchInput.fill(query);
    }

    async setPreviewText(text: string) {
        await this.previewInput.fill(text);
    }
}