import { Component, h } from "atomico";

import "../components/kun-icon/kun-icon";

import {getComponentOrDefine} from "../hooks/aync-hook/redirect";

const style = `
    .name {
    top: 10%;
    position: fixed;
    left: 0;
    right: 0;
    background: #1b1a1a85;
    padding: 5px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 24px;
    width: min-content;
    margin: 0 auto;
    border-radius: 6px;
    color: white;
    }
`;

export const SixLoading = () => (
  <host shadowDom>
    <style>{style}</style>
    <div class="name">
      <kun-icon iconType="loading" iconHeight={26} iconWidth={26} />
    </div>
  </host>
);


export default getComponentOrDefine("six-loading", SixLoading);
