// widgets/UnderConstructionWidget.ts
import { Widget } from '../components/Widget';
import { createElement } from '../utils/utils';

export class UnderConstructionWidget extends Widget {
    private message: string;

    constructor(message: string) {
        super();
        this.message = message;
    }

    render(): HTMLElement {
        this.container.innerHTML = ''; // Clear previous content

        const header = createElement('div');
        header.classList.add('widget-header', 'text-center');
        header.textContent = 'Under Construction';
        this.container.appendChild(header);

        const widgetBody = createElement('div');
        widgetBody.classList.add('widget-body', 'text-center');
        widgetBody.textContent = this.message;
        this.container.appendChild(widgetBody);

        const icon = createElement('i');
        icon.classList.add('bi', 'bi-tools', 'd-block', 'mx-auto', 'my-3'); // Bootstrap Icons class, needs Bootstrap Icons CSS if you want to use icons.
        icon.style.fontSize = '2em'; // Example icon style, can be customized.
        // Note: Bootstrap Icons would need to be included in index.html if used.
        // For prototype simplicity, we'll skip including Bootstrap Icons CSS.
        // If you want to add Bootstrap Icons, include this in index.html <head>:
        // <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
        // widgetBody.appendChild(icon); // Uncomment if you decide to include Bootstrap Icons.


        return this.container;
    }
}