import { LitElement, html, css } from "lit";
import { customElement } from "lit/decorators/custom-element.js";
import "./fridge-tile.js";

@customElement("fridge-magnets")
export class FridgeMagnets extends LitElement {
    static get styles() {
        return css`
            :host {
                display: block;
            }
            #fridgemagnets {
                width: 100%;
                height: 100%;
                display: grid;
                grid-template-rows: 100fr 18ex;
            }

            #fridge {
                overflow: hidden;
                position: relative;
                width: 100%;
                background: url("./dist/pingbg.png") repeat;
            }

            #footer {
                background-color: #32cd32;
                width: 100%;
                height: 18ex;
            }
        `;
    }

    render() {
        return html` <div id="fridgemagnets">
            <div id="fridge">
                <fridge-tile word="Magnificent"></fridge-tile>
            </div>
            <div id="footer">Footer</div>
        </div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        "fridge-magnets": FridgeMagnets;
    }
}