import { LitElement, html, css } from 'lit';
import { LoaderIcon } from './icons';

export class Loader extends LitElement {
    static styles = css`
    :host {
        display: inline-block;
        height: 100%;
        width: 100%;
        border-bottom: 1px solid rgb(229,231,235);
        border-top: 10px solid transparent;
        background-color: #fff;
        min-height: 50px;
        padding: 10px 0;
    }

    .container {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
        font-size: 14px;
        color: black;
    }

    .icon {
        height: 35px;
        animation-duration: 3s;
        animation-name: spin;
        animation-iteration-count: infinite;
    }

    @keyframes spin {
        from {
          transform: rotateZ(0deg);
        }
      
        to {
            transform: rotateZ(360deg);
        }
    }
    `;

    constructor() {
        super();
    }

    render() {
        return html`
            <div class="container">
                <img class="icon" src="${LoaderIcon}" />
                Chargement en cours
            </div>
        `
    }
}