// pages/LoginPage.ts
import { CenteredLayout } from '../layouts/CenteredLayout';
import { LoginWidget } from '../widgets/LoginWidget';
import { RegisterWidget } from '../widgets/RegisterWidget';
import { createElement } from '../utils/utils';

export const renderLoginPage = () => {
    const layout = new CenteredLayout();
    const loginWidget = new LoginWidget();
    const registerWidget = new RegisterWidget();

    const container = createElement('div');
    container.classList.add('d-flex', 'flex-column', 'gap-3', 'p-4', 'rounded', 'shadow', 'blur'); // Bootstrap flex and styling

    container.appendChild(loginWidget.render());
    container.appendChild(registerWidget.render());

    layout.addContent(container);

    document.querySelector<HTMLDivElement>('#app')?.appendChild(layout.render());
};