import { readFileSync } from 'node:fs';
import { describe, expect, it } from 'vitest';

const dialog = readFileSync(new URL('../../src/components/Dialog/Dialog.tsx', import.meta.url), 'utf8');
const styles = readFileSync(new URL('../../src/styles/import-workflow.css', import.meta.url), 'utf8');

describe('Standard dialog layout', () => {
  it('portals dialogs to the document body so the backdrop covers the viewport', () => {
    expect(dialog).toContain("import { createPortal } from 'react-dom'");
    expect(dialog).toContain('return createPortal(dialog, document.body)');
    expect(styles).toMatch(/\.dialog-backdrop\s*\{[^}]*position:\s*fixed;[^}]*inset:\s*0;/s);
    expect(styles).toMatch(/\.dialog-backdrop\s*\{[^}]*backdrop-filter:\s*blur\(8px\);/s);
  });

  it('uses the compact 500 pixel standard dialog width', () => {
    expect(styles).toMatch(/\.dialog-window\s*\{[^}]*width:\s*min\(500px, 100%\);/s);
    expect(styles).not.toContain('width: min(1000px, 100%)');
  });
});