import { t } from '../i18n.js';

class AppFooter extends HTMLElement {
    connectedCallback() {
        this.render();
    }

    render() {
        const year = new Date().getFullYear();
        
        this.innerHTML = /* html */ `
            <div class="footer-inner container">
                <p class="footer-copyright">
                    &copy; ${year} dgray. <span data-i18n="footer.rights">${t('footer.rights')}</span>
                </p>
                <nav class="footer-links">
                    <a href="#/about" data-i18n="footer.about">${t('footer.about')}</a>
                    <a href="#/privacy" data-i18n="footer.privacy">${t('footer.privacy')}</a>
                    <a href="#/terms" data-i18n="footer.terms">${t('footer.terms')}</a>
                    <a href="#/contact" data-i18n="footer.contact">${t('footer.contact')}</a>
                </nav>
            </div>
        `;
    }

    updateTranslations() {
        this.render();
    }
}

customElements.define('app-footer', AppFooter);