import { html, css, Component } from 'wkit'
import { watch } from 'wkitd'

class List extends Component {
  static props = {
    list: []
  }

  static styles = [
    css`
      .list {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        .item {
          display: flex;
          gap: 12px;
          width: 50%;
          height: 96px;
          padding: 16px 16px 16px 0;

          .icon {
            display: block;
            width: 64px;
            height: 64px;
            border: 0;
            border-radius: 16px;
            background: var(--color-red-1);
          }
          .summary {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 4px 0;
            gap: 8px;
          }

          .name {
            flex: 2;
            width: 128px;
            // height: 32px;
            border-radius: 6px;
            background: var(--color-grey-1);
          }
          .info {
            flex: 3;
            // height: 32px;
            border-radius: 6px;
            background: var(--color-plain-2);
          }
        }
      }
    `
  ]

  render() {
    return html`
      <ul class="list">
        ${this.list.map(
          it => html`
            <li class="item">
              <!-- <img src="/assets/img/debian.png" class="icon" /> -->
              <span class="icon"></span>
              <summary class="summary">
                <b class="name"></b>
                <cite class="info"></cite>
              </summary>
            </li>
          `
        )}
      </ul>
    `
  }
}

List.reg('list')