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

export const renderRegisterPage = () => {
    const layout = new CenteredLayout();
    const registerMessageWidget = new RegisterWidget("Please contact your department head to register.");
    const backButtonWidget = new BackButtonWidget('Back to Login', '#/login');

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

    container.appendChild(registerMessageWidget.render());
    container.appendChild(backButtonWidget.render());

    layout.addContent(container);

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