import { html } from '@design.estate/dees-element';

import { faIcons } from './dees-icon.js';

export const demoFunc = () => html`
  <style>
    .demoContainer {
      
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      background: #111111;
      padding: 10px; font-size: 30px;
    }
    dees-icon {
      transition: color 0.02s;
      color: #ffffff;
    }
    dees-icon:hover {
      color: #e4002b;
    }

    .iconContainer {
      display: block;
      padding: 16px 16px 0px 16px;
      border: 1px solid #333333;
      margin-right: 8px;
      margin-bottom: 8px;
    }

    .iconName {
      font-size: 12px;
      text-align: center;
      color: #ccc;
      background: #333333;
      padding: 4px 8px;
      padding-bottom: 4px;
      margin-left: -16px;
      margin-right: -16px;
      margin-top: 16px;
    }
  </style>
  
    <div class="demoContainer">
      ${Object.keys(faIcons).map(
        (iconName) => html`
          <div class="iconContainer">
            <dees-icon .iconFA=${iconName as any}></dees-icon>
            <div class="iconName">${iconName}</div>
          </div>
        `
      )}
    </div>
  
`;